internet‎ > ‎develop‎ > ‎HTML5‎ > ‎

Modal Box

Home
<!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>
Comments