Pages

Monday, March 19, 2018

Simple pop up window in HTML5 and CSS

Demo:


Copy the code and past it in your browser

<!doctype html>
<html>


<style>

#popup{display:none; background:#efefef; border:1px solid black; width:50%; height:200px;}

</style>

<body>

<button onclick="document.getElementById('popup').style.display='block'">Click Me!!!</button>
<div id="popup">

I am pop up
<button onclick="document.getElementById('popup').style.display='none'">Hide</button>

</div>

</body>
</html>





Keyword: Making of a simple pop up window html5 css

css and html5 simple pop up window
learn how to pop up a simple window
simple pop up window in html5 and css

5 comments:

  1. This is great.

    How would you do multiple pop-ups?

    I have a 3 column table and each column has a pop-up button however I can only get it to open the first instance no matter which button I push.

    ReplyDelete
    Replies
    1. You rename everything that says 'popup' to something different, like 'popup2'

      Delete
  2. Nice HTML code

    Sir mughe download button me pop-up window me text type karane ke bad download documents karbana hai
    Esa html code chahiye Kya esa html code mil sakta hai

    My md. Asif
    My whatWhat 8750947860
    My wapsite www.smartapk.xyz
    www.hdhindisoft.com
    www.supermagic.xyz
    Etc.

    Please reply me

    ReplyDelete