Click here to Skip to main content
Click here to Skip to main content
Search within:




 
Comments & Discussions (14)

HTML5/CSS 3 Modal Dialog Box; no JavaScript

By , 17 Jan 2012
 

Problem Definition

Modal dialog boxes (or, in other words, modal pop-ups or "dark-box") represent the quintessential component of the User Interface (UI) design. Web applications typically implement such functionality through the client-side Java scripting, but this option could be disabled on the client machine, negatively affecting the functional integrity of the application.

Solution

As a good alternative, the modal pop-up box could be implemented by using "pure" HTML5/CSS3 features [1...3], avoiding any JavaScripting and, therefore, providing a more robust solution, effectively resolving the issue of client's browser script settings uncertainties.
 
The following code snippet, encapsulated into a single web page (.htm) demonstrates the sample implementation of modal pop-up boxes via HTML5/CSS3 styling. In addition to the modal dialog box functionality, the following HTML5/CSS3 code snippets demonstrate the variety of web page aesthetic enhancements, pertinent to modern RIA concept:
  • Rounded corners (works in FF/Chrome/Safari/IE9)
  • Box shadows (works in FF/Chrome/Safari/IE9)
  • Color gradients (works in FF/Chrome/Safari)
  • Text shadows (works in FF/Chrome/Safari)
  • Text rotation (works in FF/Chrome/Safari)
Note: IE9 still has some problems with rendering color gradients and text rotation.
Demo
Fully-functional demo [2] is available at: http://webinfocentral.com/html5/Modalpopup.htm You could simply click on the image below to get to the demo page. This web application is intended to serve both practical and didactic purpose, thus for the sake of readability the entire solution is encapsulated in a single .htm file.
 
Note: similar functionality is implemented in another tip: iPad 2 Slide Show web application, implemented with pure CSS and published on Code Project [1]; working demo of the iPad 2 Slide Show is available at [3].
 
Madame Tussauds NY
Coding technique

"Modality" of the pop-up dialog is achieved through the following code snippet (see Listing 1a): notice the div CSS property hidden accompanied with block applied to target:

Listing 1a. Dialog box "modality" technique achieved via CSS
/*** pop-up div to cover entire area ***/
.divModalDialog  {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*! important !*/
    display:none;
    /* last attribute set darkness on scale: 0...1.0 */
    background-color:rgba(0,0,0,0.8);
    text-align:center;
    z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target  { display:block; }

References

1. Say it with CSS3!...Online Slide Show as pure CSS 3 solution
2. Modal dialog box implemented in HTML5/CSS3
3. iPad2 weekend in NY: Slide Show implemented in HTML5/CSS3
 
Listing 1.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Modal Pop-Up | HTML5, CSS3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Author" content="Alexander Bell" />
    <meta http-equiv="Copyright" content="2011 Infosoft International Inc" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-control" content="no-cache">
 
    <meta name="Robots" content="all" />
    <meta name="Distribution" content="global" />
 
    <meta name="Keywords" content="MODAL POP-UP HTML5, HTML5, CSS 3, CSS3, 
    DARKBOX HTML5, LIGHTBOX HTML5, RIA,  NO Javascript, NO jQuery />
 
    <meta name="Description" content ="MODAL POP-UP HTML5, CSS 3, 
    CSS3, DARKBOX, LIGHTBOX, NO Javascript" />
 
    <style type="text/css">
	    html, body {
	        font-family:Arial, Calibri; 
	        background-color:#bababa; 
	        margin:0; 
	        padding:0; 
	        text-align:center;
	        overflow:hidden;
	    }
	    
	    /*** horizontal list applied to thumbnails, nav controls ***/
         ul {
            float:left;
            width:100%;
            margin: 0px 0px 20px 0px;
            padding:0;
            list-style-type:none;
        }
        li {display:inline; margin-right:5px;}  
	    
	    /*** pop-up div to cover entire area ***/
	    .divModalDialog  {
	        position:fixed;
		    top:0;
		    left:0;
		    width:100%;
		    height:100%;
		    /*! important !*/
		    display:none;
		    /* last attribute set darkness on scale: 0...1.0 */
		    background-color:rgba(0,0,0,0.8);
		    text-align:center;
		    z-index:101;
	    }
	    
	    /*** ! target attribute does the job ! ***/
	    .divModalDialog:target  { display:block; }
        
        /*** virtual frame containing controls, image and caption ***/
	    .divModalDialog div  {
	       /* either absolute or fixed */
		    position:fixed;
		    top:5%;
		    width:100%;
		    height:80%;
            /* rounded corners */
	        -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            z-index:102;
	    }
	    
        /*** header used as main image caption  ***/
        .divModalDialog div h1  {
            width:100%;
            font-size:2em;
            color:#dadada;
            z-index:103;
            /* add shadows to text */
            -moz-text-shadow: 10px 3px 4px 6px rgba(0,0,0,0.9);  
            -webkit-text-shadow: 3px 4px 6px rgba(0,0,0,0.9);  
            text-shadow: 10px 4px 6px rgba(0,0,0,0.9); 
        }	    
 
        /*** main image style ***/
        .divModalDialog img {
            padding:20px;
            z-index:105;
            border: solid 1px gray;
            /* rounded corners */
        	-moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            background: -moz-linear-gradient(top, #dadada, 
                                                    #505050 5%, 
                                                    #bababa 50%, 
                                                    #303030 50%, 
                                                    #101010);
            background: -webkit-gradient(linear, center top, center bottom, 
                                                    from(#dadada), 
                                                    color-stop(0.05, #505050), 
                                                    color-stop(0.5, #bababa), 
                                                    color-stop(0.5, #303030), 
                                                    to(#101010));
        } 
 
        /*** navigation controls style: highest z-index ! ***/
	    .divModalDialog ul a  {
		    padding:5px;
		    font-size:3em;
		    font-weight:bold;
		    color:Yellow;
		    text-decoration:none;
		    border: solid 1px Gray;
		    /* rounded corners */
		    -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            z-index:110;
	    }
 
        /*** div serves as thumbnais container  ***/
        #divThumbnails {
            position:relative;
            margin: 75px 0 0 0;
            height:250px;
            padding-top:30px;
            background-color:#cacaca;
            
             /* add shadows */
            -moz-box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
            -webkit-box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
            box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
            
            /* gradient effect with color-stop */
            background: -moz-linear-gradient(top, #f0f0f0, 
                                                #bababa 10%, 
                                                #cacaca 49%, 
                                                #909090 50%, 
                                                #cacaca 50%, 
                                                #cacaca 90%, 
                                                #ababab);
            background: -webkit-gradient(linear, center top, center bottom, 
                                                from(#f0f0f0), 
                                                color-stop(0.1, #bababa ), 
                                                color-stop(0.49, #cacaca), 
                                                color-stop(0.50, #909090), 
                                                color-stop(0.50, #cacaca), 
                                                color-stop(0.90, #cacaca), 
                                                to(#ababab));
        }
 
	    /*** thumbnails image style ***/
        #divThumbnails img {
            padding:10px;
            height:200px;
            max-width:300px;
            border: solid 1px gray;
            /* rounded corners */
        	-moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            /* add shadows */
            -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            box-shadow: 5px 5px 10px rgba(0,0,0,0.5);        
            z-index:1;
        } 
 
        /*** hover effects increase visual responsiveness ***/
        #divThumbnails img:hover, .divModalDialog ul a:hover
        {
            background:#505050;
            background: -moz-linear-gradient(top, #eaeaea, 
                                                #505050 50%, 
                                                #303030 50%, 
                                                #404040);
            background: -webkit-gradient(linear, left top, left bottom, 
                                                        from(#eaeaea),
                                                        color-stop(0.5, #505050), 
                                                        color-stop(0.5, #303030), 
                                                        to(#404040));
	    }
 
        /*** fancy text effect: 180 degree ***/
	    #divUpsideDown  {
	        position: relative; 
	        margin-top:5%;
	        width:100%;
	        ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /*	        -moz-transform: rotate(-180deg);
	        -o-transform: rotate(-180deg);
	        -webkit-transform: rotate(-180deg);
	        font-size:3em;
	        font-weight:bold;
	        color:Maroon;
	       /* add shadows to text */
            -moz-text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
            -webkit-text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
            text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
        }
 
	    /* page footer/header: fixed */
	    #footer, #header {
	        position:fixed;
	        margin:0;
	        padding:0;
	        text-align:center;
	        background-color:#606060;
	        color: #cacaca;
	        /* add shadows to text */
            -moz-text-shadow: 10px 3px 4px 6px rgba(10,10,10,0.6);  
            -webkit-text-shadow: 3px 4px 6px rgba(10,10,10,0.6);  
            text-shadow: 3px 4px 6px rgba(10,10,10,0.6);    
	    }
	    #header{
	        top:0; 
	        height:70px; 
	        width:100%;
            background:#404040;
	    }
	    #footer {
	        width:75%;
	        bottom:0;
	        height:50px;
            padding-top:15px;
	        text-align:left;
	        text-indent:20%;
	        /* top rounded corners */
            -webkit-border-top-right-radius: 40px;
            -moz-border-radius-topright: 40px;
            border-top-right-radius: 40px;
            background: -moz-linear-gradient(top, #ababab, 
                                                    #505050 70%, 
                                                    #303030 70%, 
                                                    #202020);
            background: -webkit-gradient(linear, left top, left bottom, 
                                        from(#ababab),
                                        color-stop(0.75, #505050), 
                                        color-stop(0.75, #303030), 
                                        to(#202020));  
	    }
    </style>
</head>
 
<body>
    <div id="header">
        <h2>MODAL POP-UP DIALOG IMPLEMENTED IN HTML5/CSS3 (NO JAVASCRIPT)</h2>
    </div>
    
    <!-- NAV THUMBNAILS -->
    <div id="divThumbnails">
        <ul>
            <li><a href="#divModalDialog1"><img>
                src="http://webinfocentral.com/html5/Travolta.JPG" 
                alt="JOHN TRAVOLTA, NICOLAS CAGE, NY MUSEUM" /></img></a></li>
            <li><a href="#divModalDialog2"><img>
                src="http://webinfocentral.com/html5/TitanicEffortsNY.JPG" 
                alt="TITAN ATLAS NY" /></img></a></li>
            <li><a href="#divModalDialog3"><img>
                src="http://webinfocentral.com/html5/Diesel.JPG" 
                alt="DIESEL STORE NY" /></img></a></li>
            <li><a href="#divModalDialog4"><img>
                src="http://webinfocentral.com/html5/Nereid_Thought.JPG" 
                alt="NEREID THOUGHT NY" /></img></a></li>
        </ul>
    </div>
 
    <!--FANCY TEXT -->
    <div id="divUpsideDown">CLICK ON IMAGE TO OPEN MODAL POP-UP</div>
 
    <!--1st LINK -->
    <div id="divModalDialog1" class="divModalDialog">
        <div>
            <h1>WANNA TRY THIS LITTLE NY FUN-QUIZ: (YEP/NOPE)?</h1>
            <ul>
                <li><a href="#">NOPE</a></li>                      <!--CLOSE SYMBOL-->
                <li><a href="http://exm.nr/NYquiz26">YEP</a></li>  <!--EXTERNAL LINK-->
            </ul>
            <img src="http://webinfocentral.com/html5/Travolta.JPG" alt="TRAVOLTA, CAGE" />
        </div>
    </div>
 
    <!--2nd LINK -->
    <div id="divModalDialog2" class="divModalDialog"><div>
            <h1>YOU WILL BE REDIRECTED TO THE NY POP-QUIZ: OK/CANCEL?</h1>
            <ul>
                <li><a href="#">⊗</a></li>                 <!--CLOSE-->
                <li><a href="http://exm.nr/NYquiz3">OK</a></li> <!--EXTERNAL LINK-->
            </ul>
            <img src="http://webinfocentral.com/html5/TitanicEffortsNY.JPG" alt="TITAN ATLAS" />
    </div></div>
 
    <!--3rd LINK -->
    <div id="divModalDialog3" class="divModalDialog"><div>
            <h1>YOU WILL BE REDIRECTED TO THE NY POP-QUIZ (EXTERNAL LINK): YES/NO?</h1>
            <ul>
                <li><a href="#">Oh, NO!</a></li>                              <!--CLOSE-->
                <li><a href="http://exm.nr/NYquiz22">SURE THING, YES!</a></li><!--EXTERNAL LINK-->
            </ul>
            <img src="http://webinfocentral.com/html5/Diesel.JPG" alt="DIESEL STORE NY" />
     </div></div>
 
    <!--4th LINK -->
    <div id="divModalDialog4" class="divModalDialog"><div>
            <h1>DUDE, DO YOU WANNA TRY NY FUN-QUIZ AND HAVE FUN?</h1>
            <ul>
                <li><a href="#">OH MAN NOT NOW!</a></li>                     <!--CLOSE-->
                <li><a href="http://exm.nr/NYquiz16">YEAH, LET'S GO!</a></li><!--EXTERNAL LINK-->
            </ul>
            <img src="http://webinfocentral.com/html5/Nereid_Thought.JPG" alt="NEREID THOUGHT NY" />
    </div></div>
 
    <div id="footer">
        Copyright© 2011 Infosoft International Inc | Author: Alexander Bell, NY | 
        <a href="http://www.webinfocentral.com" target="_blank">HOME</a> |
    </div>
 
</body>
</html>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

DrABELL
Chief Technology Officer Infosoft Int'l
United States United States
Dr. A. Bell has 20+ years of SW/EE experience, published 200+ tech articles and authored 37 inventions; Win/Web veteran, currently focused on: HTML5, CSS3, Javascript, jQuery, SQL, Windows 8, .NET, C#, WPF, Ultrabooks, Mobile. Developed popular Silverlight Media Player, 3 Fractions Calculator and best YouTube API for ASP.NET (#1 Goog). Sample pubs/projects:
  1. HTML5 Best Practices: Table formatting via CSS3
  2. Personal computer 2012
  3. New iPad: notes from NY Apple store
  4. YouTube and Facebook popularity metrics
  5. Edumatter M12: School Math Calculators and Equation Solvers
  6. How to select web browser and check its capabilities
  7. SQL generates large data sequence
  8. Aggregate Product function extends SQL
  9. Top-50 Digital Cameras
  10. Evolution of digital cameras
  11. WebTV Project: Embedded YouTube Player
Follow on   Twitter

Article Top
 
Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
Hint: For improved responsiveness ensure Javascript is enabled and choose 'Normal' from the Layout dropdown and hit 'Update'.
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
First Prev Next
QuestionDoesnt Work in IE8memberankit_sam29-Jul-12 0:53 
Hi,
Great Work.
One problem, It doesn't work in IE8.
Any hack can be done to make it work in IE8?
 
Thanks
Sign In·View Thread·Permalink
AnswerRe: Doesnt Work in IE8memberDrABELL29-Jul-12 8:04 
GeneralRe: It's OK :-). Take it easy. My best, Alex B.memberDrABELL5-May-11 14:42 
GeneralRe: Oops, you are correct.protectorAspDotNetDev5-May-11 8:41 
GeneralReason for my vote of 5 code onli cssmemberMember 42824324-Jan-12 6:05 
GeneralReason for my vote of 3 The topic is very interesting but co...memberJaime Olivares27-Dec-11 21:59 
GeneralText in body shows as a mirror image in Ff 8.01memberElizabethG20-Dec-11 3:41 
GeneralRe: Thanks for the note. It is a demo of new CSS feature - see t...memberDrABELL20-Dec-11 4:12 
GeneralNice onememberShahriar Iqbal Chowdhury6-May-11 4:04 
GeneralRe: Thanks!memberDrABELL13-May-11 9:44 
GeneralFYI, this does not work for me in IE8 (works fine in FF 3.6....protectorAspDotNetDev5-May-11 8:03 
GeneralRe: Hello; FYI: IE8 IS NOT HTML 5 compatible. IE9 is just partia...memberDrABELL5-May-11 8:19 
GeneralGood one.. :)memberPrasanta_Prince16-Apr-11 7:58 
GeneralThank you, Deeksha!memberDrABELL5-Apr-11 4:52 
Last Visit: 31-Dec-99 18:00     Last Update: 19-Jun-13 15:53Refresh1

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

About Article
Pure HTML5 modal pop-up box ("darkbox") implemented via CSS 3
Type Tip/Trick
Licence CPOL
First Posted 17 Mar 2011
Views 80,238
Bookmarked 32 times

, +
Tools
Test HTML compatibility
Related Videos
Add Image Borders using HTML5/CSS3
ASP.NET AJAX Control Toolkit ModalPopupExtender Control in Action
Login/SignUp Screen Using AJAX ModalPopupExtender
Learn HTML5 in 5 Minutes!
The singular non-modality of MFC modal dialogs
JQuery Message Box Plugin
Confirm Message Box
Modal Dialog - Enhanced
Lock ASP.NET Page and Show Animated Image While Waiting for a Long Post-Back
Masked Div Or Modal Popup Window
An Example of Using the jQuery Validation Plug-in
Delete Functionality in GridView with Confirmation Using jQuery UI Dialog
Building Apps with HTML5: What You Need to Know
Custom Alert Boxes using JavaScript and the DOM
Fancy ASP.NET MVC Image Uploader
SpaceShoot Single-Player
Speech Recognition for the Web
Message Box Control
Thumbnail Image Viewer Control for ASP.NET 2.0
Calling ASP.NET server-side events using JavaScript
Related Research
HTML5 for Mobile Devices The Better Choice
Choosing the Right Charting Component for Your Enterprise Product
Permalink | Advertise | Privacy | Mobile
Web03 | 2.6.130619.1 | Last Updated 17 Jan 2012
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid