popup creating using JavaScript


HTML:-

<div class="container1">
 <button id="btnclick">PopUp</button>
 <div class="disply">
 <div class="pops-content">
     <div class="pops">
      <spna class="close">X</spna>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur quasi deserunt recusandae id sapiente velit, aliquam reprehenderit dolore aut quis expedita debitis ad nobis, accusamus quibusdam, deleniti nostrum quos aperiam hic esse rerum repellat architecto molestiae facilis. Ipsa neque alias doloribus impedit harum sapiente minus! Porro ex minima, dolore tempora.</p>
     
     </div>
 </div>
 
 </div>

</div>

CSS:-
body{ margin: 0px; padding: 0px; list-style: none; }
container1{width: 1170px; height: auto; margin: 0 auto; }
#btnclick{ background-color: red; margin-top: 50px;}
.disply{ display: none}
 .pops-content { position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;   overflow: auto;
  background-color: rgb(0,0,0, 0.4);
  }
.pops {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

 
.close {
    color: #505050;
    float: right;
    font-size: 16px;
    font-weight: bolder;
    margin-top: -14px;
    margin-right: -10px;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}   

js:-
<script type="text/javascript">
var showw = document.getElementsByClassName("disply");
var cross = document.querySelector(".close"); 
var btnclk = document.getElementById("btnclick");


window.onload = function(e){
showw[0].style.display="block"
}
cross.addEventListener("click",function(){
showw[0].style.display="none" 
});

btnclk.addEventListener("click", function(){
showw[0].style.display="block" 
});

setTimeout(function(){
showw[0].style.display="none" 
},2000);
 
/*  ( this example defult in btn click  or using window click uncomment in window js )
window.onclick = function(ent){
    if(ent.target = showw){
        showw[0].style.display="none";
    }

*/

</script>


No comments:

Post a Comment