How to have html popup appear over main html page?

by

you can set css to the popup div which u want to show over the html page.
Consider the following eg: 

#mainPage {
  width: 100%;
  height: 100%
}

#popUp {
  display: none;
  z-index: 100;
  width: 200px;
  height: 50px;
  background: #ADD;
}
<html>

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

</head>

<body>
  <div id="mainPage">
    <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" width="20%" />
  </div>
  <div id="popUp">
    <p>Hello !!! It's a popup div </p>
  </div>
</body>
<script type="text/javascript">
  $(function() {
    $('#mainPage img').on('click', function() {
      $('#popUp').show();
    });
  });
</script>

</html>

More Related Contents:

  1. When we using alert vs popup div tag? [closed]
  2. How to hide css and js version details from weppalyzer in PHP
  3. CSS Propertie change OnClick [closed]
  4. My website doesn’t load jQuery [closed]
  5. How to make page loaders/animations/transitions
  6. My JS is not working (chat application)
  7. Change from (+) symbol to (-) after click (function(){
  8. How can i create html automatic change page? [duplicate]
  9. How to apply !important using .css()?
  10. Make header and footer files to be included in multiple html pages
  11. How to show popup message like in Stack Overflow
  12. Using jQuery how to get click coordinates on the target element
  13. Dropdown select with images
  14. Disable dragging an image from an HTML page
  15. Responsive horizontal page sliding
  16. Use a new CSS file to override current website’s
  17. Scale element proportional to Background Cover with jQuery
  18. How can I change the font (family) for the labels in Chart.JS?
  19. How to build simple tabs with jQuery?
  20. Unusual shape of a textarea?
  21. I want to show list items as 2 or more columns (dynamic alignment)
  22. How to display Image dynamically on UI?
  23. Bootstrap Dropdown with Hover
  24. Modal image galleries – multiple images
  25. Set focus and cursor to end of text input field / string w. Jquery [duplicate]
  26. How to show hidden divs on mouseover?
  27. How to make superfish dropdown menu responsive?
  28. Detect if dropdown navigation would go off screen and reposition it
  29. Iframe inherit from parent
  30. Bootstrap Dropdown menu is not working

Leave a Comment