Sawtooth Software: The Survey Software of Choice

Creating a Dialog box using CSS

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. Click on LINK 1 and LINK 2 to see how this works.

X

Window #1

This modal window is brought to you courtesy of plain old CSS3. There is no JavaScript, jQuery, or jQuery UI.

X

Window #2

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.

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>

Sawtooth Software

6:30 AM to 5:30 PM Mountain Time
(GMT-6; GMT-7 Autumn/Winter)
Monday through Friday

Phone: +1 801 477 4700
Fax: +1 801 434 5493
Email: support@sawtoothsoftware.com

We are open!

SKIM Software

9:00 AM to 5:30 PM Central European
(GMT+2; GMT+1 Autumn/Winter)
Monday through Friday

Phone: +31 10 282 3500
Fax: +31 10 282 3560
Email: software@skimgroup.com
Online: www.skimgroup.com

Lighthouse Studio

Lighthouse Studio is our flagship software for producing and analyzing online and offline surveys. It contains modules for general interviewing, choice-based conjoint, adaptive choice-based conjoint, adaptive choice analysis, choice-value analysis, and maxdiff exercises.

Try Lighthouse Studio

  Buy Lighthouse Studio