I have following div which i am showing as popup:
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;
display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;
padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
When its shown, i can easily view other part of screen in the main background.
Its viewing as below:
(Entry updated sucessfully is popup div above)
I dont want to show background screen when poup is there.
I want to make it black..
How can i make it black??
I tried with setting opacity to 0.75 ... but that prooved misconceptual...did not solved my purpose..
What can i do for it???
Please help me.
Here you go!
Here's the HTML code:
<div id="overlay">
<div id="pop-up">
Content in Pop-up.
</div>
</div>
And here's the CSS code:
#overlay {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #000000;
display: none;
}
#pop-up {
background-color: white;
border: 2px solid black;
display: block;
width: 350px;
z-index: 1001;
top: 60px;
left: 240px;
position: fixed;
padding-left: 10px;
margin: auto;
}
Hope this helps!
Here is what I would do:
Create a fixed div with 100% width and height;
put the popup div inside this fixed overlay and center it horizontally and vertically.
<div class="overlay">
<div class="popup">
Whatever code!!
</div>
</div>
css
.overlay{
position:fixed;
z-index:999;
width:100%;
height:100%;
background-color: black;
background-color:rgba(0,0,0,.75)
}
.popup{
width:300px;
position:absolute;
left:50%;
top:100px;
margin-left:-150px;
}
Update 2020:
I would use 100vh and 100vw as it is widely supported. Centering the popup would be done with CSS Grid Layout and aligning the box to center.
.overlay{
position:fixed;
z-index:999;
width:100vw;
height:100vh;
background-color: black;
background-color:rgba(0,0,0,.75)
}
Here's a FIDDLE
if($('#divOperationMessage').length > 0 && $('.mask').length < 1) {
$('body').append('<span class="mask"></span>');
}
.mask {
background: rgba(0,0,0,0.8);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You need to add an overlay div to place over the main content, and below the popup div.
div.overlay {
position: fixed;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
background-color: rgba(0,0,0,.75); /*this sets the slightly see-through black*/
z-index: 100; /*Make this less than the existing popup div*/
}
Try this
<div id="divOperationMessage" style="background-color: White; border: 2px solid black;display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;padding-left: 10px;margin:auto;">
------------------Whatever content inside-----------------------------
</div>
<div class = 'black_bg' style = "position:fixed;width:100%;height:100%;opacity:0.75;background-color:#000"></div>
And whenever you are showing the popup , add this line
$('.black_bg').show();
If you wanna use jquery,you can use jquery modal feature.
Easy to use!
Check here :
http://jqueryui.com/dialog/#modal
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
In this,if you click on the button,or outside of the popup menu,it closes.
You don't have to code down that too.
Short and compacT!
Related
So basically we have a concept picture: http://imgur.com/a/Z38Fy
Each of these window's is a div element on the site that on click should get on top. Let's say we click on window #2, that means that window 2 is on top now and window 1 is behind it. This is literally how the Windows operating system individual windows work.
Is this possible using jQuery and javascript?
Is this what you are looking for?
Set the z-index when click on a div, and set the z-index of the others to something lower
$("div").click(function() {
$("div").not(this).css("z-index", "1")
$(this).css("z-index", "2")
})
div {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color:white;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
A quick example
$(".window").on("click", function() {
$(".window").css("z-index", 0);
$(this).css("z-index", 1);
});
.window {
width: 250px;
height: 250px;
}
.window:nth-child(1) {
background-color: lightblue;
position: absolute;
left: 20px;
top: 20px;
}
.window:nth-child(2) {
background-color: purple;
position: absolute;
left: 100px;
top: 60px;
}
.window:nth-child(3) {
background-color: darkgreen;
position: absolute;
left: 180px;
top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="window">W1</div>
<div class="window">W2</div>
<div class="window">W3</div>
</div>
As Carsten Løvbo Andersen answered, yes! it is posible, and he gave us an example that works using jQuery and javascript.
I just want to point out that it can be done by using css and html only, what answer the title of this question "Making divs focus and change z-index".
See modified Carsten Løvbo Andersen example:
.container {
position: absolute;
height: 100px;
width: 100px;
border: 1px solid #000;
background-color: white;
z-index: 0;
}
.container:focus {
z-index: 1;
}
.one {}
.two {
top: 40px;
left: 100px;
}
.three {
top: 70px;
left: 40px;
}
<div class="container one" tabIndex="0">1</div>
<div class="container two" tabIndex="0">2</div>
<div class="container three" tabIndex="0">3</div>
I have on my website some lightboxes and now I can scroll them only when my pointer is inside the box.
How can I scroll them outside the box, like when you open a comment on Trello or on Pinterest?
Here is my code:
//Declare vars
var $lightboxAnchor = $("a.list_message");
//Lightbox
$(".overlay-background").hide();
//Lightbox functions from leistungen
$lightboxAnchor.click(function() {
var $attr = $(this).attr("href").replace("#", "");
console.log($attr);
$('div[id=' + $attr + ']').show();
$("body").addClass("noscroll");
});
$(".overlay-background").click(function() {
console.log('alert');
$(this).hide();
$("body").removeClass("noscroll");
});
$(".close_lightbox").click(function() {
console.log('alert');
$(".overlay-background").hide();
$("body").removeClass("noscroll");
});
.overlay-background {
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content
{
display: block;
background: #fff;
padding: 1%;
width: 70%;
height:70%;
position: absolute;
top: 15%;
left: 10%;
margin: 0;
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
<div class="overlay-background">
<div class="overlay-content">
<object type="text/html" data="https://en.wikipedia.org/wiki/Dentist" style="width: 100%; height: 100%;" </object>
</div>
</div>
I`ve made this JSFiddle as a representation: jsfiddle.net/9mesun50 As you can see the lightbox can be scrolled only inside it. If I have the pointer outside the lightbox I can scroll it.
Thank you for help!
I am trying to achieve toggle option using jQuery. I have two styles (sub-menu-icon and sub-menu-mobile). On clicking on "sub-menu-icon" class div, i want to toggle "sub-menu-mobile" class div to toggle from left to right and right to left.
$(document).ready(function() {
$('.sub-menu-icon').toggle(function() {
$(".sub-menu-mobile").css("width", "200px");
});
});
.sub-menu-icon {
width: 30px;
height: 30px;
border: 1px solid #2B383E;
background-color: #4390ce;
display: block;
float: right;
}
.sub-menu-mobile {
min-width: 0px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-icon">
Icon
</div>
<div class="sub-menu-mobile">
Rights side Menu
</div>
You want to use a click handler on the menu, then toggle a class that toggles the width. You also need to re-arrange the HTML elements and add position: relative; to the menu so the menu will show up above the sidebar.
$('.sub-menu-icon').on('click',function() {
$(".sub-menu-mobile").toggleClass('width');
});
.sub-menu-icon {
width: 30px;
height: 30px;
border: 1px solid #2B383E;
background-color: #4390ce;
display: block;
float: right;
position: relative;
}
.sub-menu-mobile {
min-width: 0px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
.width {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-mobile">
Rights side Menu
</div>
<div class="sub-menu-icon">
icon
</div>
there seems to be a thread with a case very similar to yours. Check this out!
Toggle Between two Divs
I have a popup which will get shrink and the content will dislocate on the browser window resize. I am stuck with this
Here is the fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/
and here is the fullscreen fiddle: http://jsfiddle.net/sarathsprakash/ZjdU4/show/
Maybe you could view and check resizing the window
HTML
<div id="popup" >
<div id="img-section" >
<img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
</div>
<div id="description">
//text content
</div>
</div>
<div id="fade" class="black_overlay"></div>
click here
CSS
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#popup {
display: none;
position: fixed;
top: 8%;
left: 10%;
max-width:1200px;
max-height:600px;
height:auto;
width:auto;
padding: 16px;
background-color: white;
z-index:1002;
overflow:hidden;
}
#img-section {
position:relative;
width:800px;
float:left;
background:black;
cursor:pointer;
height:600px;
padding:5px;
margin-top: -20px;
margin-left: -15px;
margin-right: 10px;
}
#description {
position:relative;
background-color: #fff;
max-width:400px;
overflow-y: auto;
position: relative;
word-wrap: break-word;
max-height:600px;
height:auto;
padding: 20px;
}
#img-section > img {
display:inline-block;
height: auto;
vertical-align:middle;
width:auto;
}
I want the poup to remain as it is, It should not shrink
Thanks in advance
Side scrolling for a popup is horrible, but:
make the popup position: absolute instead of fixed
give the body a min-width of left margin + popup width (currently that would be calc(1200px + 10%)
same for height?
make all max-width => width, because you know how much room you have
Your existing CSS is mighty strange, but this might do it: http://jsfiddle.net/rudiedirkx/ZjdU4/1/
Highlights:
body {
min-width: calc(1200px + 10%);
}
.black_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#popup, #popup * {
box-sizing: border-box;
}
#popup {
position: absolute;
width: 1200px;
height: 600px;
padding: 0;
}
You are using percentage for your height and width.
The browser change its size on Resize, therefore the value of the percentage depreciates.
Like 10% of 100px differs from 10% of 10px.
Use px to keep your height and width the same size on resize.
Of course depending on what you want neither is better than the other
I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery
HTML:
<div id="logincontainer">
</div>
css :
#loginContainer {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat scroll center center #FF660D; /*for example */
border-color: #FFFFFF;
border-image: none;
border-right: medium solid #FFFFFF;
border-style: none solid solid;
border-width: medium;
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
min-height:200px;
right: 0;
top: 0;
vertical-align: super;
width: 100%;
z-index: 9999999;
}
Here is the http://jsfiddle.net/a39Va/16/
I am not sure is there is a way to make the background image as clickable which is pointed in div?
Any suggestion would be great.
Just do something like:
<div id="loginContainer'></div>
Or you can do that as well via JavaScript and jQuery
$('#loginContainer').click(function(e) { <Whatever you want to do here> });
You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.
Here's an updated jsFiddle
HTML
<div id="loginContainer">
</div>
<div class="content">
<p>Something</p>
</div>
CSS
#loginContainer {
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat center #FF660D;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
#loginContainer a {
display: block;
height: 100%;
width: 100%;
}
.content {
z-index: 2;
position: relative;
width: 200px;
height: 100px;
background: #fff;
margin: 30px 0 0 30px;
}
Here's a Fiddle
HTML
<div id="logincontainer" data-link="http://google.com"></div>
jQuery
$(function() {
$('#logincontainer').hover(function() {
var divLink = $(this).attr('data-link');
$(this).wrap('');
});
});
Why not using an anchor ?
<a href="link" id="logincontainer">
</a>
i updated your jsFiddle
otherwise :
you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )