Click here to Skip to main content
11,490,408 members (73,451 online)
Click here to Skip to main content

HTML5/CSS 3 Modal Dialog Box; no JavaScript

, 14 Feb 2015 CPOL 133.6K 51
Rate this:
Please Sign up or sign in to vote.
Pure HTML5 modal pop-up box ("darkbox") implemented via CSS 3

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
  • Box shadows
  • Color gradients
  • Text shadows
  • Text rotation

Note: Works in all major Web Browsers (Internet Explorer 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.

Madame Tussauds NY

Note: Similar functionality is implemented in another tip: iPad 2 Slide Show web application, implemented with pure CSS and published on Code Project (working demo of the iPad 2 Slide Show is available at [2]).

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; }
Listing 1. Complete Web Page implementing Modal Dialog Boxes (CSS3 solution)
<!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 FIND DIGITAL CAMERA?</h1>
            <ul>
                <li><a href="#">NOPE</a></li>                      <!--CLOSE SYMBOL-->
                <li><a href="http://webinfocentral.com/digicam.aspx">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>LOOKING FOR A JOB?</h1>
            <ul>
                <li><a href="#">?</a></li>                 <!--CLOSE-->
                <li><a href="http://webinfocentral.com/job.aspx">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>NEED TUTOR?</h1>
            <ul>
                <li><a href="#">Oh, NO!</a></li>                              <!--CLOSE-->
                <li><a href="http://webinfocentral.com/tutor.aspx">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>LET'S GO TO HOME PAGE?</h1>
            <ul>
                <li><a href="#">NOT NOW</a></li>                     <!--CLOSE-->
                <li><a href="http://webinfocentral.com">YEAH!</a></li><!--EXTERNAL LINK-->
            </ul>
            <img src="http://webinfocentral.com/html5/Nereid_Thought.JPG" alt="NEREID THOUGHT NY" />
    </div></div>
 
    <div id="footer">
        Copyright&copy; 2011 Infosoft International Inc | Author: Alexander Bell, NY | 
        <a href="http://www.webinfocentral.com" target="_blank">HOME</a> |
    </div>
 
</body>
</html>

References

  1. Modal dialog box implemented in HTML5/CSS3
  2. Slide Show implemented in HTML5/CSS3

License

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

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran, published 300+ articles and authored 37 inventions, credited for 10+ Enterprise level projects (>250k code lines); currently focused on .NET/WPF, C#, HTML5, jQuery, SQL, 'Big Data', AI, Speech Tech and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample projects/pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
  4. Online 3 Fractions Calculator (#1 on Goog)
  5. Top-100 Digital Cameras (powered by iMark-DCAM rating engine)
  6. Engineering Calculator VOLTA-814 for Windows
  7. Pericles™ TTS-14 Text-to-Speech Synthesizer (Win)
  8. Semaphon™ SP-300 semantic phone number converter (Win)
  9. PaydayNY-2015 Payroll Tax Calculator (Win)
  10. 'Find Job Agency' Online Interactive Map (Microsoft Bing technology)
Follow on   Twitter

Comments and Discussions

 
QuestionThe key is Target att, right? Pin
Member 1102682613-Feb-15 16:51
memberMember 1102682613-Feb-15 16:51 
AnswerRe: The key is Target att, right? Pin
DrABELL14-Feb-15 5:59
professionalDrABELL14-Feb-15 5:59 
QuestionEh??? Pin
Member 436622015-Nov-14 4:00
memberMember 436622015-Nov-14 4:00 
QuestionDoesnt Work in IE8 Pin
ankit_sam29-Jul-12 1:53
memberankit_sam29-Jul-12 1:53 
AnswerRe: Doesnt Work in IE8 Pin
DrABELL29-Jul-12 9:04
memberDrABELL29-Jul-12 9:04 
GeneralRe: It's OK :-). Take it easy. My best, Alex B. Pin
DrABELL5-May-11 15:42
memberDrABELL5-May-11 15:42 
It's OK Smile | :) . Take it easy. My best, Alex B.
GeneralRe: Oops, you are correct. Pin
AspDotNetDev5-May-11 9:41
protectorAspDotNetDev5-May-11 9:41 
GeneralReason for my vote of 5 code onli css Pin
Member 42824324-Jan-12 7:05
memberMember 42824324-Jan-12 7:05 
GeneralReason for my vote of 3 The topic is very interesting but co... Pin
Jaime Olivares27-Dec-11 22:59
memberJaime Olivares27-Dec-11 22:59 
GeneralText in body shows as a mirror image in Ff 8.01 Pin
ElizabethG20-Dec-11 4:41
memberElizabethG20-Dec-11 4:41 

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

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 14 Feb 2015
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid