I have a function that when clicked takes the div container and centers it on screen, enlarged with fixed position and z-index of 2. I would like to dynamically create an element to sit z-index of 1 underneath the div with a black background, partially transparent, that hides the main content. How do I create and place this element into the page and delete it afterwards?
Add a comment
|
2 Answers
- This demo has on overlay that's loaded on window onload event (
#overlay). - There's a password input in
#overlay(#passis "off") #overlaywill useclassListto change it's class to.offonce the password is entered, thereby rendering#overlaynon-existent (display: none).
var ov = document.getElementById('overlay');
var ps = document.getElementById('pass');
ps.addEventListener('change', function(e) {
if (pass.value === "off" && ov.classList.contains('on')) {
ov.classList.add('off');
ov.classList.remove('on');
} else {
alert('password is incorrect');
}
}, false);
function init() {
ov.classList.add('on');
}
window.onload = init;#overlay {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
}
.content {
border: 3px solid red;
width: 400px;
height: 200px;
margin: 50px auto;
padding: 10px;
}
p {
font: 600 16px/1.428'Arial' margin: 0 0 15px 10px;
}
#pass {
pointer-events: auto;
width: 100px;
line-height: 20px;
text-align: center;
margin: 25% auto 0;
display: block;
}
.off {
display: none;
}
.on {
display: block;
}<div id="overlay" class="off">
<input id="pass" name="pass" type="password" placeholder="Enter Password">
</div>
<div class="content">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
Comments
I have a function that when clicked takes the div container and centers it on screen
Since you are doing this you have more control over it, All you have to so it is add this part of html along with this div of yours. (your div and this new div must be wrapped inside a parent div)
HTML
<div class="overlay-parent">
<div class="overlay"></div>
/* your div */
</div>
CSS
.overlay-parent{
width:100%;
height:100%;
overflow:hidden;
}
.overlay{
position:absolute;
top:0;
bottom:0;
width:100%;
background-color: black;
opacity:0.3;
}
This should be the structure when you are centering the div to center of the screen. And appending this structure to the body tag will get you the desired result
