OK, So i have this snippet http://jsfiddle.net/8vFEd/ here;
whenever the popup comes up, I either want to disable the background, so that users can't click on another language until they close the first popup, or how would I accomplish that, whenever users click on second language, the first popup disappears and its corresponding popup appears.
My suggestion would be to put an overlay over the background which will "catch" clicks through to the rest of the page. Add the following to your $('.prop a').click() function, before the <div class='lang'> append call:
$("body").append('<div class="modalOverlay">');
and this to your css:
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0,0,0,0.3); /* black semi-transparent */
}
Then in your code for handling "close" clicks, remove this .modalOverlay from the DOM. Remember to add the overlay before your popup window so it sits behind the window (or add "z-index: 5" to your overlay css and "z-index: 6" to your popup css)
I would also suggest modifying your .lang css rule to be position: absolute; or fixed instead of relative.
Add this at beginning of your onclick
$(".lang").remove();
That will remove or clear the div with lang class before repainting the DOM with a new one.
Related
Is it possible to integrate radio buttons with a hand image for fingerprinting in Bootstrap? Is it possible to have an exact positioning for radio buttons to put just upper each finger and it stay unchanged for popular browsers (IE, Firefox and Chrome)? Indeed, I want something like this:
To get this done you can use technique of element absolute positioning (radio-button) within parent element (image container).
/*
Set container position to relative
Note: This will not affect parent's current position
*/
.image-container {
position: relative;
}
/*
Now all children with position: absolute
would be position within their parent
*/
input[type="radio"] {
position: absolute;
top: 50%;
left: 40%;
}
For more details please take a look at the DEMO I have created. It also includes transparent labels so clicking on the finger will actually select a radio button.
On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.
I used position:absolute; so that when you click the tab "Send this page to your email", at the top, the panel goes down and goes over the content underneath instead of pushing them down. However, using absolute position means that the tab will move to the left when you zoom in or move to the right when you zoom out. It just doesn't look right when you zoom in or out. I want the tab to "go inwards" when you zoom out and not have it "slide". Is it possible to keep the tab from "sliding" and line it up with panel that slides out?
Here's my page with the tab: http://coroomer.com/apartments/ztestpage/index.php
Since you're using absolute positioning, you don't need to bother with javascript/jQuery. You can just modify your HTML/CSS as follows:
Move this:
<p align="center" class="flip" id="toggle">Send this page to your email.</p>
so that it's the first child of this:
<div style="float: right; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" 500px="" height:="" id="map_canvas" class="map">
In the above div (id="map_canvas"), set overflow to "visible". Then set #toggle's CSS as follows (tweak values to suit your needs):
#toggle {
font-family: segoe ui;
left: 100px;
top: -44px;
}
If you don't want to go that route (but you really should), you'd have to write a function that fires on window.onresize which sets the #toggle element's position relative to whatever element of your choosing.
you should use another div with fixed width and set it's position to relative, then when you put this div with aboslute positioning into this relative positioned div it won't move with page resizing
I want to create a fixed position button that will run on my site, either on the left hand side or as a popout panel (see http://uservoice.com/fullservice for a cool popout button at the bottom of the screen). Clicking on the button will launch a popup window that my company uses for contact and feedback information.
Is there a basic example CSS for these types of buttons? I am a JS guy and created the popup window with no problems, but I don't have the CSS skills to get the button to activate my window.
the css would be:
.button {
position: fixed;
bottom: 0;
right: 0; //or left: 0; depending on where you want it to be.
}
with html being:
<div class='button'> button text here </div>
Try something like this:
#feedback-button {
position: fixed;
bottom: 0px;
right: 0px;
}