I try to close lightbox by clicking outside of the current image, but I don't how to do.
I just have a link "Back" in order to close this lightbox...
I use only CSS3, maybe Script is the solution, thanks for your help.
Here's a short CSS :
/*thumbnails*/
.album {
position: relative;
width:1200px;
height:auto;
float: left;
}
/*fullscreen*/
.overlay {
position: fixed;
left: 258px;
top: 0px;
padding: 0px;
overflow: hidden;
}
/*close fullscreen, back to thumbnails*/
.close {
position: absolute;
top: 50px;
left: 50%;
}
HTML
<ul class="album">
<li>
<img src="images/thumbs/example.jpg>
<div class="overlay" id="example">
<img src="images/full/example.jpg" />
BACK
</div>
</li>
</ul>
You could use a pseudo-element on the .close element and position that between the lightbox and the image using z-index.
.overlay:target .close:before {
position: fixed;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.overlay { z-index: 5; }
.lightbox image { z-index: 15; }
Related
Issue: I cannot natively lazy load an iframe on a modal window. When I check the waterfall in Inspect element > Network, the iframe loads immediately.
Goal: The iframe should load ONLY when modal is triggered. Can you help please?
I don't use dependencies like jQuery, but javascript is OK if it provides a solution. I tried the native and several other lazy loading solutions with no success.
My code:
.modal-state {
display: none
}
.modal-state:checked+.modal {
opacity: 1;
visibility: visible
}
.modal-state:checked+.modal .modal__inner {
top: 0
}
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: #f2f2f2;
transition: opacity .01s ease;
z-index: 7;
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer
}
.modal__inner {
transition: top .01s ease;
height: max-content;
position: relative;
max-width: 1200px;
width: -webkit-fill-available;
margin: auto;
padding: 1em 1em;
}
.modal__close {
position: absolute;
right: 1.1em;
top: 0;
/*-.3em*/
width: 1.1em;
height: 1.1em;
cursor: pointer;
z-index: 1
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #999;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #000
}
.modal__close:before {
transform: rotate(-45deg)
}
.container-pay {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
}
.responsive-iframe-pay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<p>In our <label for="modal-store">merchandize store</label>.</p>
<input class="modal-state" id="modal-store" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-store"></label>
<div class="modal__inner"><label class="modal__close" for="modal-store"></label>
<p>
<div class="container-pay">
<iframe loading="lazy" class="responsive-iframe-pay" src="https://store.website.com"></iframe>
</div>
</p>
</div>
</div>
iFrames load when they're encountered in the rendered HTML DOM. Since your iFrame exists as part of the initially loaded code, it will load when the parser hits that portion of the HTML.
You can defeat that initial load action by either adding the iFrame to the DOM or modifying the URL right before the modal window is opened.
Modifying the <iframe src="" /> is likely the best solution since it will keep the loaded content for any additional times the modal is displayed.
You can do this by adding an "onchange" event to the checkbox which will run the javascript to change the src attribute of the iframe.
Make sure to change the src on the iframe to an empty string"" so it doesn't try to load anything right away.
var toggle = document.getElementById('modal-store');
var frame = document.getElementById('the-iframe');
var urlTarg = "https://google.com";
// put the page you want to load in the frame in the urlTarg
function toggleModal() {
if(toggle.checked && frame.src != urlTarg){
frame.src = urlTarg;
}
}
.modal-state {
display: none
}
.modal-state:checked+.modal {
opacity: 1;
visibility: visible
}
.modal-state:checked+.modal .modal__inner {
top: 0
}
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: #f2f2f2;
transition: opacity .01s ease;
z-index: 7;
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer
}
.modal__inner {
transition: top .01s ease;
height: max-content;
position: relative;
max-width: 1200px;
width: -webkit-fill-available;
margin: auto;
padding: 1em 1em;
}
.modal__close {
position: absolute;
right: 1.1em;
top: 0;
/*-.3em*/
width: 1.1em;
height: 1.1em;
cursor: pointer;
z-index: 1
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #999;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #000
}
.modal__close:before {
transform: rotate(-45deg)
}
.container-pay {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
padding-top: 56.25%;
/* 16:9 Aspect Ratio */
}
.responsive-iframe-pay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
<p>In our <label for="modal-store">merchandize store</label>.</p>
<input class="modal-state" id="modal-store" type="checkbox" onchange="toggleModal" />
<div class="modal">
<label class="modal__bg" for="modal-store"></label>
<div class="modal__inner"><label class="modal__close" for="modal-store"></label>
<p>
<div class="container-pay">
<iframe id="the-iframe" loading="lazy" class="responsive-iframe-pay" src=""></iframe>
</div>
</p>
</div>
</div>
Edit: Apply to multiple different buttons showing content in the same iframe
You can apply this to multiple iframe targets on the same page or the same site with a few modifications. This assumes that:
You'll re-use the modal window AND iframe HTML code.
That you want to display a different URL each time the modal is opened
The modal window HTML exists on each HTML page that you want to have modal + iframe.
You would modify the Javascript to something like this:
// you'll pass all the required values to the function
function toggleModal(checkbox, frameTarg, urlTarg) {
var frame = document.getElementById(frameTarg);
if(checkbox.checked && frame.src != urlTarg){
frame.src = urlTarg;
}
}
You will only need the javascript once per parent page since the same function can work for any combo of checkboxes, iframes, and URLs
And the checkbox HTML to:
(Note: the same function could be applied to a button, link, etc)
<input class="modal-state"
id="modal-store"
type="checkbox"
onchange="toggleModal(this, 'the-iframe', 'https://theurltoloadinframe.com')"
/>
<input class="modal-state2"
id="modal-store"
type="checkbox"
onchange="toggleModal(this, 'iframe2', 'https://someotherurltoload.com')"
/>
Basically, the function expects you to pass in:
The current checkbox - (denoted by this)
The ID of the iframe you want to change make sure its a string with quotes
The URL you want to load in the iFrame also in a string
I have following image as following,
How can i write text on image above and achieve the outcome as the following?
Try this, I hope it'll help you out. Thanks
.wrapper {
position: relative;
}
.wrapper img {
width: 100%;
}
.wrapper label {
color: #fff;
font-size: 24px;
position: absolute;
}
.wrapper #id1 {
left: 20px;
top: 20px;
}
.wrapper #id2 {
right: 20px;
top: 20px;
}
.wrapper #id3 {
left: 20px;
bottom: 20px;
}
.wrapper #id4 {
right: 20px;
bottom: 20px;
}
.wrapper #id5 {
right: 20px;
top: 50%;
transform: rotate(90deg)
}
.wrapper #id6 {
left: 20px;
top: 50%;
transform: rotate(-90deg)
}
<div class="wrapper">
<label id="id1">Text Left!</label>
<label id="id2">Text Right!</label>
<label id="id3">Text Bottom Left!</label>
<label id="id4">Text Bottom Right!</label>
<label id="id5">Text Rotate Right!</label>
<label id="id6">Text Rotate Left!</label>
<img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/07/Depth-of-field-landscape.jpg" alt="" />
</div>
Assuming you have HTML like:
<div class="container">
<img />
<p>Foo</p>
</div>
something like this would work (you'll have to fiddle the values obviously):
.container {
position: relative;
img{ z-index: 1; // img styles here }
p { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 3; transform: rotate(90deg) }
}
Step by step:
Position the text absolutely
Rotate it 90 degrees
Set a Z-index higher than the image
Position the text correctly on the image
Profit ...
I am setting a wrapper to be full screen with a slight opacity. Within that wrapper I have another div which is to be centered on the screen. All works, but the opacity is being applied to the inner div (loading icon and some text).
The html cannot change in the sense that .dataTables_processing will always be a wrapper no matter what.
html:
<div class="dataTables_processing">
<div class="dataTables_processing_custom">
<i class="fa fa-spinner fa-spin"></i> Please wait...
</div>
</div>
css:
.dataTables_processing {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
padding: 0;
background-color: #333;
opacity: 0.05;
cursor:wait;
z-index:9998;
}
.dataTables_processing_custom {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
margin-left: -100px;
text-align: center;
color:#3276b1;
font-size: 14px;
z-index:9999;
}
.dataTables_processing_custom i{
font-size:30px;
vertical-align:middle;
}
When the CSS style opacity is applied to the parent, it does it to all it's children, try using a RGBA method for a background instead:
.parent {
background: rgba(0,0,0,0.5);
}
I was recently assigned the job of copying a JS popup our previous web developer made. I've got it very similar yet there's one thing I can't get, for the close button (X) to float over the popup in the top right corner (rather than being sat on top right corner of the popup). I've tried with position: values in the CSS and other attributes I've found around Stack overflow, yet none seem to do the trick.
The CSS:
#popup {
position:absolute;
display:hidden;
top:50%;
left:50%;
width:400px;
height:586px;
margin-top:-263px;
margin-left:-200px;
background-color:#fff;
z-index:2;
padding:5px;
}
#overlay-back {
position : fixed;
top : 0;
left : 0;
width : 100%;
height : 100%;
background : #000;
opacity : 0.7;
filter : alpha(opacity=60);
z-index : 1;
display: none;
}
.close-image {
display: block;
float:right;
cursor: pointer;
z-index:3
}
The HTML:
<div id="overlay-back"></div>
<div id="popup">
<img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>
Just add position, right and top to your class .close-image
.close-image {
cursor: pointer;
display: block;
float: right;
z-index: 3;
position: absolute; /*newly added*/
right: 5px; /*newly added*/
top: 5px;/*newly added*/
}
Use this css
.close-image {
cursor: pointer;
z-index: 3;
right: 5px;
top: 5px;
position: absolute;
}
.close-image {
cursor: pointer;
display: block;
float: right;
position: relative;
top: 22px;
z-index: 1;
}
I think this might be what you are looking for.
I know this post is little bit old but here is a potential solution for anyone who has the same problem:
First, I would change the CSS display for #popup to "none" instead of "hidden".
Second, I would change the HTML as follow:
<div id="overlay-back"></div>
<div id="popup">
<div style="position: relative;">
<img class="close-image" src="images/closebtn.png" />
<span><img src="images/load_sign.png" width="400" height="566" /></span>
</div>
</div>
And for Style as follow:
.close-image
{
display: block;
float: right;
cursor: pointer;
z-index: 3;
position: absolute;
right: 0;
top: 0;
}
I got this idea from this website (kessitek.com). A very good example on how to position elements,:
How to position a div on top of another div
I hope this helps,
Zag,
What about:
.close-image{
display:block;
cursor:pointer;
z-index:3;
position:absolute;
top:0;
right:0;
}
Is that the desired result?
I need to achieve this:
when I hover at the red box, the purple one should disappear, when I hover over the orange one, blue one should disappear and then I hove over the yellow one, the green one disappears. I managed to do that, however I need to do it in reverse, too, but everything I tried didn't work. Could anyone help me?
<html>
<head>
<title>Boxes</title>
<style type"text/css">
div {
width:70px;
height:90px;
border:3px solid #000;
}
.t1 {
background: red;
top: 50px;
left: 15px;
position: absolute;
}
.t1:hover + .t6{
background: red;
top: 50px;
left: 15px;
z-index: 1;
position: absolute;
visibility: invisible;
}
.t2 {
position: absolute;
background:orange;
top: 100px;
left: 60px;
}
.t2:hover + .t5 {
position: absolute;
background:orange;
top: 100px;
left: 60px;
z-index: 1;
visibility: invisible;
}
.t3 {
background:yellow;
top: 150px;
left: 110px;
position: absolute;
}
.t3:hover + .t4 {
background:yellow;
top: 150px;
left: 110px;
position: absolute;
visibility: invisible;
z-index: 1;
}
.t4 {
background:green;
top: 200px;
left: 160px;
position: absolute;
}
.t5 {
background:blue;
top: 250px;
left: 210px;
position: absolute;
z-index: 1;
}
.t6 {
background:purple;
top: 300px;
left: 260px;
position: absolute;
z-index: 2;
}
<!--backwards-->
</style>
</head>
<body>
<div class="t1"></div>
<div class="t6"></div>
<div class="t2"></div>
<div class="t5"></div>
<div class="t3"></div>
<div class="t4"></div>
</body>
It is possible! with some tricks :P just reorder some boxes and play with containers.
Final solution: http://jsfiddle.net/vd7km/4/
I am just playing with CSS but you can check my work: http://jsfiddle.net/vd7km/
<div class="cont" id="cont1" >
<div id="d1" ></div>
<div id="d2" ></div>
</div>
Here is the magic code:
.cont div:first-child:hover + div {
visibility: hidden;
}
.cont:hover div:first-child {
visibility: hidden;
}
.cont:hover div:first-child:hover {
visibility: visible !important;
}
Updated!: http://jsfiddle.net/vd7km/2/
Two more and code refactoring.
Almost done: http://jsfiddle.net/vd7km/3/
It is done: http://jsfiddle.net/vd7km/4/
Thanks to let me play :-)
CSS only currently works in a "downward" way. This means that you can only go from parent to child or first sibling to next sibling. You can't go "up" - child to parent or second sibling to first.
In other words, you can do t1 + t6 (select t6 when it's next to t1), but you can't do t6 + t1 (select t1 when it's next to t6) with your current HTML structure, because t1 comes before t6.
The only way to traverse up the DOM is to use JavaScript.
Impossible with CSS alone. Use JavaScript instead.