I'm creating my own modal, here's my CSS:
.modal{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 999;
.modal-content{
margin: 60px auto;
background-image:url('/static/img/background-modal.jpg');
width: 700px;
height: 700px;
.box-shadow(0 10px 2px #999);
}
}
And the HTML:
<div class="modal">
<div class="modal-content">
My Modal
</div>
</div>
.modal refers to the greyed out background and .modal-content refers to the box that pops up.
The problem is that the greyed background only covers the browser window, when I scroll down to see the rest of my modal box, the greyed background stops and I can see my pages content.
I can fix this with a fixed position, but then you can not see the entire content of .model-content.
What about that?
http://codepen.io/ivanchaer/pen/izDuI
HTML:
<div class="modal"></div>
<div class="modal-content">
My Modal
</div>
CSS:
.modal {
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
z-index:999;
}
.modal-content {
position:relative;
z-index:1000;
background-color:#fff;
width:700px;
height:700px;
box-shadow:0 10px 2px #000;
margin:60px auto;
}
I have a decision for you, it is described in this post (russian). It is a jquery plugin, but you can use only styles.
Demo and github
In few words: when modal is visible we add lock class name to body element (body.lock {overflow: hidden} — prevents body scrolling).
div.shim is a fullscreen modal background (position: fixed) and it has overflow: auto, which provides possibility to scroll modal content (not content of the body).
HTML markup:
<html>
<head>
...
</head>
<body class="lock">
<div class="shim">
<div class="modal">
...
<h1>Hi, I'm the modal demo.</h1>
...
</div>
</div>
...
</body>
</html>
(I'm a non-native english speaker, feel free to correct my answer if need)
You do need to add position:fixed to .modal other it will move as you scroll down the page. I would then alter .modal-content to:
.modal-content{
position:absolute;
margin: -350px 0 0 -350px;
top:50%;
left:50%;
background-image:url('/static/img/background-modal.jpg');
width: 700px;
height: 700px;
.box-shadow(0 10px 2px #999);
z-index:1000;
}
You should have the 'greyed out' div on its own. Like so:
<div class="modal"></div>
<div class="modal-content">
My Modal
</div>
And then fix position the greyed out div and I centered the modal content div vertically and horizontally
But the problem was more with your greyed out div
here's a fiddle: http://jsfiddle.net/uj9Gg/2/
Replacing width:100%; and height:100%; with min-width:100%; and min-height:100%; for your .modal class seems to fix your issue.
.modal {
position: absolute;
display: block;
top: 0;
left: 0;
min-width:100%;
min-height:100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 999;
.modal-content {
margin: 60px auto;
background-image:url('/static/img/background-modal.jpg');
width: 700px;
height: 700px;
.box-shadow(0 10px 2px #999);
}
}
http://jsfiddle.net/E4Nm4/3/
Related
I can't sort out how to move the element, which is placed under .content-wrapper{ overflow:hidden; .content{position:absolute;} }, to the very top.
Consider a screenshot below:
An image element with man photo is placed under the .content element. But the part of his head on photo, which is highlighted with yellow (pointed with red arrow) is hidden due to the parent .content-wrapper has an overflow:hidden property. The main problem is that I can't change the hidden overflow to whatever else.
Is that actually real to solve such a problem without using a JavaScript?
==== Supplement 1 ====
To clarify the problem, I've made up a code snippet below:
.wrapper{
width:100%;
overflow:hidden;
position:initial;
padding:0 10px;
background-color:#EEEEEE;
box-sizing:border-box;
}
.content-wrapper{
position:relative;
overflow:hidden;
background-color:#DDDDDD;
margin:10px 0;
min-height:350px;
}
.content{
background-color:white;
position:absolute;
top:30px;
left:10px;
right:10px;
bottom:10px;
}
.content.grayed{
background-color:#CCCCCC;
}
.content.positioned{
top:50px;
left:180px;
bottom:-50px; //negative positioned parts supposed to be hidden
right:-50px; //as .content-wrapper has overflow:hidden;
}
.content.positioned img{
width:40%;
height:auto;
margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper
margin-left:10vw;
min-width:250px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Is there really no any solution?
I would consider adding the image outside and adjust the position to obtain this. Change the translation to adjust the position:
.wrapper {
width: 100%;
overflow: hidden;
position: relative; /*change this*/
padding: 0 10px;
background-color: #EEEEEE;
box-sizing: border-box;
}
.content-wrapper {
position: relative;
overflow: hidden;
background-color: #DDDDDD;
margin: 10px 0;
min-height: 350px;
}
.content {
background-color: white;
position: absolute;
top: 30px;
left: 10px;
right: 10px;
bottom: 10px;
}
.content.grayed {
background-color: #CCCCCC;
}
.content.positioned {
top: 50px;
left: 180px;
bottom: 0;
right: 0;
padding: 20px calc(40% - 0.4*148px) 0 20px; /* the space of the image*/
}
.content.positioned img {
position: absolute;
opacity: 0; /*Hide this one*/
}
.hack {
/*Don't use any top/bottom here !!*/
left: 190px;
right: 10px;
position: absolute;
z-index: 1;
}
.hack img {
width: 40%;
position: absolute;
right: 0;
bottom: 0;
transform: translateY(70%);
max-width:300px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="hack">
<img src="//i.imgur.com/DsOdy1V.png">
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br> ...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Add a <div> like content-wrapper-inner and move the height, position from content-wrapper into it.
.wrapper{
width:100%;
overflow:hidden;
position:initial;
padding:0 10px;
background-color:#EEEEEE;
box-sizing:border-box;
}
.content-wrapper{
overflow:hidden;
background-color:#DDDDDD;
margin:10px 0;
}
.content{
background-color:white;
position:absolute;
top:30px;
left:10px;
right:10px;
bottom:10px;
}
.content-wrapper-inner {
min-height:350px;
position:relative;
background-color: red;
}
.content.grayed{
background-color:#CCCCCC;
}
.content.positioned{
top:50px;
left:180px;
bottom:-50px; //negative positioned parts supposed to be hidden
right:-50px; //as .content-wrapper has overflow:hidden;
}
.content.positioned img{
width:40%;
height:auto;
margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper
margin-left:10vw;
min-width:250px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content-wrapper-inner">
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Try to make overflow:visibleof the outer div of the content.
You can't have content reach out of a parent with overflow: hidden and still find a way to show the head. The question is why you need overflow hidden on the parent.
Perhaps you could use a sibling element for the image container and limit overflow on the content container.
Something like:
HTML
<div class="parent">
<div class="child-content-wrapper">
Content goes here
</div>
<div class="child-image">
Image goes here
</div>
</div>
CSS:
.parent {
position: relative;
}
.child-content-wrapper {
overflow: hidden;
}
.child-image {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
}
That should work and you'll be able to get the cut off effect on the rotated content box and the whole head.
Currently I'm working with a wordpress theme. I don't know PHP so can't edit the files, and unable to add bootstrap with it. But I need a pop-up box in my page, so I used CSS. But the problem is the pop-up window poping up within the parent window, I want it full screen. How can i do it? Check Screenshot and code here: http://justpaste.it/n4ol
You can use new popup?
Here is the
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click here</p>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
</body>
Try this
Use this popup in footer. You will find help .
try something like this:
.popup{
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
}
i was looking about two hours, how to center a div on the screen. So, when you scroll down a huge page and click on a link, the div "pop up" should appear on the center of screen, not of page.
If you take code like this, it will only center the div on the page, so it's not visible without scrolling up:
.centerDiv {
width: 800px;
border-radius: 5px;
background: #ccc;
padding: 10px;
height: 50px;
position: absolute;
margin-top: -25px;
margin-left: -400px;
top: 50%;
left: 50%;
}
Thanks for your help :)
Instead of position: absolute try out position: fixed
Use position: fixed and then center it like so:
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
This will get it centered on the page wherever you are. Just display the popup when you want to. See my demo at the bottom for a look into what it would look like.
Example:
body {
height: 3000px;
}
.popup {
width: 200px;
height: 150px;
border: 1px solid;
background: red;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
<div class="popup">I stay in the middle no matter where you scroll.</div>
Another example showing you the click link at the bottom of the page:
Demo Here
Note: Scroll to the bottom and click the span.
/*
this is javascript free .. almost.
Here i show you how to create pure CSS3 overlays
this uses the :target pseudo class
*/
*{margin:0;padding:0;}
#overlay{ /* we set all of the properties for are overlay */
height:80%;
width:80%;
margin:0 auto; /* center dude */
background:white;
color:black;
padding:10px;
position:absolute;
top:5%;
left:10%;
z-index:1000;
display:none;
/* CSS 3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#mask{ /* create are mask */
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:500;
width:100%;
height:100%;
display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
display:block;
opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
display:block;
position:absolute;
top:-20px;
right:-20px;
background:red;
color:white;
height:40px;
width:40px;
line-height:40px;
font-size:35px;
text-decoration:none;
text-align:center;
font-weight:bold;
-webkit-border-radius:40px;
-moz-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
}
#open-overlay{ /* open the overlay */
padding:10px 5px;
background:blue;
color:white;
text-decoration:none;
display:inline-block;
margin:20px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Open Overlay
<div id="overlay">
×
<div style="height:20%"></div>
<h2 style="font-size:35px">Pure CSS Overlay</h2>
<br />
<br />
<br />
<p style="font-size:22px;">This overlay is made using zero javascript. With the CSS :target pseudo class. You can target an element then change it's properties. Here we hide this div then show it upon targeting. (see the URL). To exit we'll just change the URL back!</p>
</div>
<div id="mask" onclick="document.location='#';"></div> <!-- the only javascript -->
Here's a pure CSS3 overlay right here for ya. As for centering; margin: 0 auto;
FIDDLE DEMO HERE DUDE
center div on screen with CSS
HTML
<div class="hm_container">
<div class="hm_content"></div>
</div>
CSS
.hm_container{position: absolute; top: 50%; margin-top: -125px; left: 0; width: 100%;}
.hm_content{width:50%; margin-left: auto; margin-right: auto; height:150px; border:#000 solid 1px;}
DEMO1
Another demo by using CSS3
HTML
<div class="vhm"></div>
CSS
.vhm{min-height:200px; width:500px; left:50%; top:50%; border:#000 solid 1px; position:absolute;
transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
-moz-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
}
DEMO2
I've got a tile containing a title, a category, a link to the category, a picture and a global link to the picture. As it is, this global link is only active in a piece of the picture area. I would like it to be global.
Here is the HTML :
<div id="article">
<div class="block-module">
<a class="view-full-module" href="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg">
<img class="image" src="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg"/>
</a>
<div class="block-about">
<h2 class="block-title">Title</h2>
<span class="block-stats">Category Date</span>
</div>
</div>
</div>
Here is the CSS :
.view-full-module { cursor: pointer; top: 0px; left: 0px; z-index: 2; background: none repeat scroll 0% 0% rgba(31, 32, 33, 0); width: 100%; height: 100%; }
.image { width: 100%; }
.block-module { width: 100%; position:relative; margin:0; padding:0; cursor:pointer; border-radius:10px; z-index:4; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.author-link { color:#659dae; }
#article { top:0; margin: 0; padding:20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; column-gap: 20px; -moz-column-width: 260px; -webkit-column-width: 260px; column-width: 260px; }
Here is a demo : http://jsfiddle.net/5qwejk20/4/
One option would be to add pointer-events: none to the element .block-about.
In doing so, you can essentially click through the element:
Updated Example
.block-about {
pointer-events: none;
}
Browser support for the pointer-events property can be found here.
Another option would be to move the anchor element and then absolutely position it relative to the parent in order to take the full dimensions.
The reason you need to move the anchor element in the DOM is because if it wraps the img element, then you can't have your background fading at the bottom since the anchor needs to be positioned above it in order for the click event to work anywhere within the element.
Updated Example
.view-full-module {
cursor: pointer;
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
z-index: 2;
}
<div id="article">
<div class="block-module">
<img class="image" src="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg" />
<div class="block-about">
<h2 class="block-title">Title</h2>
<span class="block-stats">Category Date</span>
</div>
<a class="view-full-module" href="http://www.cosmos.com/Common/Images/Destinations/machupicchu3.jpg"></a>
</div>
</div>
As a side note, you may want to add vertical-align: top to the img element in order to remove the gap under it.
Example without the gap
img {
vertical-align: top;
}
Simple question (I hope) that's eluding me.. I have an overlay for a modal window that sets the opacity to .87, however my div inside that (the modal content) seems to inherit that opacity.
CSS:
body { background-color:black; }
#overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align:center;
z-index: 99;
background-color: black;
opacity:.87;
}
#overlay > div {
width:300px;
height:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
opacity:1;
z-index: 100;
}
HTML:
<div id="overlay">
<div>some stuff here</div>
</div>
Here is a fiddle (the background should be pure white, not mixed). What am I doing wrong?
Opacity is inherited by child elements AFAIK.
Why not try using:
background:rgba(0,0,0,.87);
I removed the black background.
Check it here: http://jsfiddle.net/zZ57q/3/