Technical Destination

Aapka Apna blog jo kre apki problem Solve

Monday 8 July 2019

Home » » Show an Image PopUp after Page Load using html css javascript jquery

Show an Image PopUp after Page Load using html css javascript jquery

1 comment

Show an Image PopUp after Page Load



<!DOCTYPE html>

<html>

<head>

<title>PopUp image</title>


 <style type="text/css">

 #popupmain {


    position: fixed;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.6);

    z-index: 1001;

}


#popup {

         width: 500px;

         height: 350px;

         background: url('https://cdn.dribbble.com/users/784152/screenshots/5323966/check_pop_dribbble.gif');

         background-size: cover;

         position: absolute;

         top: 50%;

         left: 50%;

         transform: translate(-50%,-50%);

      }


  #txt {

  text-align: center;

  color: white;

  }


  #submit {

  background-color: green;

  font-size: 40px;

  text-align: center;


  }


   </style>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

</head>

<body>

  <div id="popupmain" style="display: none;">

   

  <div id="popup">

 

  <h1 id="txt">Welcome to Goraya City</h1>


  <h2 id="txt"> इस website पर visit करने के लिए धन्यवाद  </h2>


  <br> <br> <br> <br> <br><br> <br>


          <center> <button id="submit"> Close</button>  </center>

  </div>


  </div>


   <h1>Popup image shows after 5 sec</h1>

 <img src="sachin.jpg" width="400px">


  <script>

 

  $(document).ready(function(){

 setTimeout(function(){

  $('#popupmain').css('display','block'); }, 5000);

});


$('#submit').click(function(){

 $('#popupmain').css('display','none');

});


  </script>

</body>

</html>

Share:

1 Comments:

  1. Anonymous4 April 2022 at 09:37

    Show An Image Popup After Page Load Using Html Css Javascript Jquery ~ Technical Destination >>>>> Download Now

    >>>>> Download Full

    Show An Image Popup After Page Load Using Html Css Javascript Jquery ~ Technical Destination >>>>> Download LINK

    >>>>> Download Now

    Show An Image Popup After Page Load Using Html Css Javascript Jquery ~ Technical Destination >>>>> Download Full

    >>>>> Download LINK Ae

    ReplyDelete

loading...