Creating a Dialog box using CSS

Last Updated: 10 Sep 2015Hits: 2997
Is it possible to create a dialog box that opens up when you click on a link and then you have to press a close box to close it?

Yes, you can use CSS and HTML 5 to create a dialog box. Here's an example:

As an alternative to a tooltip, you can have a hyperlink open up a modal dialog box. This means that a box will appear in the center of the window while the rest of the content on the page is darkened. In fact, this can be accomplished with standard HTML and CSS--no JavaScript, JQuery, or jQuery UI required.

And here is the code that produces this effect:

<style>
.modalbg{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0);z-index:99999;display:block;pointer-events:none}
.modalbg .dialog{width:400px;position:relative;top:-1000px;margin:10% auto;padding:5px 20px 13px;border-radius:10px;background:#fff;box-shadow:0 0 10px #000}
.modalbg .dialog .ie7{filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=135,Strength=3)}
.modalbg:target{display:block;pointer-events:auto;background:rgba(4,10,30,0.8)}
.modalbg:target .dialog{top:-90px}
.close{background:#606061;color:#FFF;line-height:25px;position:absolute;right:-12px;text-align:center;top:-10px;width:24px;text-decoration:none;font-weight:700;border-radius:12px;box-shadow:0 0 10px #000}
.close .ie7{filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',Direction=135,Strength=3)}
.close:hover{background:#00d9ff}
</style>

<p>As an alternative to a tooltip, you can have a hyperlink open up a modal dialog box. This means that a box will appear in the center of the window while the rest of the content on the page is darkened. In fact, this can be accomplished with standard HTML and CSS--no JavaScript, JQuery, or jQuery UI required. Click on <a href="#link1">LINK 1</a> and <a href="#link2">LINK 2</a> to see how this works.</p>

<div id="link1" class="modalbg">
 <div class="dialog">
  <a href="#close" title="Close" class="close">X</a>
  <h2>Window #1</h2>
  <p>This modal window is brought to you courtesy of plain old CSS3. There is no JavaScript, jQuery, or jQuery UI.</p>
  <p><img src="http://lorempixel.com/400/300" alt="" border="0"></p>
 </div>
</div>

<div id="link2" class="modalbg">
 <div class="dialog">
  <a href="#close" title="Close" class="close">X</a>
  <h2>Window #2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut blandit mi. Suspendisse potenti. Phasellus aliquet sollicitudin justo, vitae dignissim metus tincidunt ut. Sed at sagittis elit. Morbi nisl nunc, congue sit amet felis eu, porta mattis dui. Quisque odio nisi, facilisis nec euismod vitae, rutrum quis metus. Quisque urna eros, venenatis a euismod in, interdum sed orci. Etiam faucibus ipsum libero, vitae condimentum turpis auctor et. Proin condimentum condimentum nibh ornare rhoncus. Donec pulvinar elementum mauris, in porttitor orci pharetra ac. Donec leo libero, hendrerit at viverra at, mollis eu eros.</p>
  <p><img src="http://lorempixel.com/400/200" alt="" border="0"></p>
 </div>
</div>