How To Add Popup Image With Link In Your Website

How To Add Popup Image With Link In Your Website

How To Add Popup Image With Link In Your Website

How To Add Popup Image With Link In Your Blogger, Wordpress, Html And Php Website

Image pop up With website url

Image pop up With website url

 

<div id = "popup" class = "hidden modal">

 

  <a href="  link " target="_blank"> 

<image src=" image url " alt=”” > </a>

     

 <h2> <p style="color:red;">   <a href=" link ”  target="_blank" >

 Book Now  </a>  </p>  </h2>

     

       <div class="modal-footer">

               <button type="button" class="btn btn-default" id='close' data-dismiss="modal">Close</button>

      </div>

</div>

 

 

<style>

#popup {

  display: inline-block;

  opacity: 0;

  position: fixed;

  top: 20%;

  left: 50%;

  padding: 1em;

  transform: translateX(-50%);

  background: #fff;

  border: 1px solid #888;

  box-shadow: 1px 1px .5em 0 rgba(0, 0, 0, .5);

  transition: opacity .3s ease-in-out;

  z-index:99999;

}

 

#popup.hidden {

  display: none;

}

#popup.fade-in {

  opacity: 1;

}

</style>

<script>

window.onload = function () {

  /* Cache the popup. */

  var popup = document.getElementById("popup");

 

  /* Show the popup. */

  popup.classList.remove("hidden");

 

  /* Fade the popup in */

  setTimeout(()=>popup.classList.add("fade-in"));

 

  /* Close the popup when a city is selected. */

  document.getElementById("close").onclick = function () {

     /* Fade the popup out */

     popup.classList.remove("fade-in");

    

     /* Hide the popup. */

     setTimeout(()=>popup.classList.add("hidden"), 300);

  };

};

</script>

this code valuable for blogger, wordpress, html and php website -- only links and options change based on website

 

 




follow on twitter


Follow Our Page


Top
close

Visitor Counter = visitor counter