Link to a pure CSS modal already 'poppedup'

Hi All,

I am using a pure css template for modal popups. I would like to know how to make a link to an already 'poppedup' modal so I can share it.

Thanks

Fiddle


HTML
<label for="modal1">OPEN</label>
<input type="checkbox" class="modal" id="modal1">
<div class="modal">
<article>
<p>Modal content here!</p>
</article>
<label for="modal1" class="close"></label>
<label for="modal1" class="overlay"></label>
</div>

CSS
label {
color: #00f;
text-decoration: underline;
cursor: pointer
}

.modal,
.modal * {
box-sizing: border-box;
-moz-box-size: border-box;
transition: all .2s ease-in-out
}

.modal:checked+.modal {
opacity: 1;
pointer-events: all
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 500;
padding: 15px;
overflow-y: scroll;
opacity: 0;
pointer-events: none
}

.modal article {
background: #fff;
width: 100%;
padding: 50px;
position: relative;
z-index: 700
}

.modal .close:before {
content: '×';
display: block;
padding: 20px 30px;
font-size: 200%;
position: absolute;
top: 0;
right: 0;
z-index: 800;
cursor: pointer
}

.modal .close:hover:before {
color: #c00
}

.modal .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
z-index: 600;
cursor: pointer
}

 

Fiddle:
https://jsfiddle.net/postcolonialboy/t07ut6nd/2/

 

You can't - if you want to make a direct link to the modal being open, you'll have to do that either with javascript or server-side, based on the link the user uses. Ie, you'd have to create a specific link for each modal, and if anyone uses that link, the javascript or server side will parse the link and make the input be checked by default.

 

Parse it server side... using something like getdata. your.url?open=whatever

then say the back-end is php, you just:

<input type="checkbox" id="modal1" <?php
  if (array_key_exists('open', $_GET) && $_GET['open'] == 'modal1') echo ' checked';
?>>

Code (markup):