Create popups with HTML and CSS

You can use popup windows to display important messages or simply make changes on the site. Popups are of two types: normal and modal.

Note: modal windows differ from normal ones in that while the modal window is open, the user cannot interact with other site elements until the modal window closes.

Popup

The first step in creating a popup window is to create a <div> element (or any other element) and design it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      #box {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
	  }
    </style>
  </head>

  <body>
  
    <div id="box">
	  Popup window!
	</div>

  </body>
</html>
Try it »

This <div> will be used as a popup window. Now we hide it with the none value of the display property and add a link, when you click on that popup window will appear:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      #box {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
	  }
	  #box:target {display: block;}
    </style>
  </head>

  <body>
  
    <div id="box">
	  Popup window!
	</div>
	
	<a href="#box">Call a popup window</a>

  </body>
</html>
Try it »

Using the pseudo-class :target, we select and apply styles to the element to which the transition was performed. Therefore, after you navigate the link, the value of the display property of the <div> element changes from none to block.

Now you have to position the <div> in the middle of the page to make it look like a popup. We make it absolutely positioned and center it vertically and horizontally:

#box {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  display: none;
  
  /*position and center*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

The next step is to implement a window hiding by clicking anywhere on the page or on the window itself. To do this, we need to place the <div> element inside the <a> element:

<a href="#" id="main">
  <div id="box">
	Popup window!
  </div>
</a>

We then position the <a> element and stretch it to the full width and height of the window. Set it to display: none; and redirect our link to it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
	  #main {
	    display: none;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	  }
      #box {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #main:target {display: block;}
    </style>
  </head>

  <body>
  
    <a href="#" id="main">
      <div id="box">
	    Popup window!
      </div>
    </a>
	
	<a href="#main">Call a popup window</a>

  </body>
</html>
Try it »

For the <div> element, remove display: none; (it is no longer needed, since we are now hiding <a>). As a result, the parent <a> now hides the pop-up window, redirecting the selection to the page.

This creates a simple popup window is finished.

Modal box

To create a popup modal box, take the element <div>, decorate it and add a link, when you click it will appear:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      #box {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #box:target {display: block;}
    </style>
  </head>

  <body>
  
    <div id="box">
	  Popup window!
    </div>
	
	<a href="#box">Call a popup window</a>

  </body>
</html>

The next step in creating a full modal box is to add a button that will hide our box. The button will be made from the usual link, adding it to our <div> and setting the style:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      #box {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	  }
	  #box:target {display: block;}
	  .close {
	    display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>

  <body>
  
    <div id="box">
	  Popup window!<br>
	  <a href="#" class="close">Close window</a>
    </div>
	
	<a href="#box">Call a popup window</a>

  </body>
</html>
Try it »

For the effect of blackout of the page when displaying the modal box, you need to place all available box code in the additional <div>:

<div id="blackout">
  <div id="box">
	Popup window!<br>
	<a href="#" class="close">Close window</a>
  </div>
</div>

Position the parent <div> and stretch it to the full width and height of the window. Set it to display: none; and redirect the link of the box call to it.

At the child <div> remove display: none; (it is no longer needed because the parent <div> will hide everything inside it). As a result, the parent <div> is now responsible for displaying the modal box and for darkening the background of the page, and the child only for the appearance of the box itself:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
	  #blackout {
	    background: rgba(102, 102, 102, 0.5);
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: none;
	  }
      #box {
	    width: 300px;
		height: 50px;
	    text-align: center;
	    padding: 15px;
	    border: 3px solid #0000cc;
	    border-radius: 10px;
	    color: #0000cc;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		background: #fff;
	  }
	  #blackout:target {display: block;}
	  .close {
	    display: inline-block;
        border: 1px solid #0000cc;
        color: #0000cc;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #f2f2f2;
        font-size: 14pt;
        cursor:pointer;
      }
      .close:hover {background: #e6e6ff;}
    </style>
  </head>

  <body>
  
    <div id="blackout">
      <div id="box">
	    Popup window!<br>
	    <a href="#" class="close">Close window</a>
      </div>
    </div>
	
	<a href="#blackout">Call a popup window</a>

  </body>
</html>
Try it »

Note: if you want the user to immediately see a popup window when you go to the page (instead of calling it via a link), then the page URL should contain the window id (for example, the address might look like this: site.com/folder/documet.html#box)

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen