RIA 对话框颜色按钮图形 CSS3 Web 开发 HTML5

HTML5/CSS 3 模态对话框；无需 JavaScript

DrABELL

4.78/5 (26投票s)

2011年3月17日

CPOL

2分钟阅读

236716

纯 HTML5 模态弹出框（“暗盒”）通过 CSS 3 实现

问题定义

模态对话框（或者说，模态弹出框或“暗盒”）是用户界面 (UI) 设计中必不可少的部分。Web 应用程序通常通过客户端 JavaScript 实现此功能，但此选项可能会在客户端机器上禁用，从而对应用程序的功能完整性产生负面影响。

解决方案

作为一种很好的替代方案，可以使用“纯”HTML5/CSS3 功能来实现模态弹出框 [1...3]，避免使用 JavaScript，从而提供更可靠的解决方案，有效解决客户端浏览器脚本设置不确定性问题。

以下代码片段封装在一个网页（.htm）中，演示了通过 HTML5/CSS3 样式实现模态弹出框的示例。除了模态对话框功能外，以下 HTML5/CSS3 代码片段还演示了与现代 RIA 概念相关的各种网页美学增强功能。

圆角
盒阴影
颜色渐变
文本阴影
文本旋转

注意：适用于所有主流 Web 浏览器（Internet Explorer 在渲染颜色渐变和文本旋转方面存在一些问题）。

演示

此 Web 应用程序旨在兼具实用性和教学目的，因此为了便于阅读，整个解决方案都封装在一个 .htm 文件中。功能完整的演示可在 [1] 处获得：您可以单击下面的图像以访问演示页面。

图 1. 在实际应用中，单击图像将打开模态弹出对话框（演示截图）

图 2. 模态对话框（“暗盒”弹出框）作为纯 CSS3 解决方案实现，示例截图

注意：另一个 Web 应用程序 幻灯片展示 通过纯 CSS 实现类似的功能，并发布在 Code Project [3] 上：工作演示在 [2]。

编码技巧

弹出对话框的“模态性”通过以下代码片段实现（参见列表 1a）：请注意 div CSS 属性 hidden 伴随着应用于 target 的 block

列表 1a. 通过 CSS 实现对话框“模态性”技巧

        /* pop-up div 'dark box' */
        .divModalDialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            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' pseudo-class does the job */
            .divModalDialog:target { display: block; }

列表 1. 实现模态对话框的完整网页（CSS3 解决方案）

<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="2010-2015 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, no javascript, no jquery" />
    <meta name="Description" content="MODAL POP-UP HTML5, CSS 3, CSS3, DARKBOX, LIGHTBOX, NO Javascript" />

    <style type="text/css">
        /*fancy text*/
        #divUpsideDown {
            position: relative;
            width: 100%;
            margin-top: 10px;
            text-align: center;
            -moz-transform: rotate(-180deg);
            -o-transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            font-size: 1.5em;
            font-weight: 600;
            color: #909090;
        }

        /* thumbnais container */
        #divThumbnails {
            position: relative;
            margin: 1px 0 0 0;
            padding-top: 10px;
            cursor: pointer;
        }

            /* thumbnails image */
            #divThumbnails img {
                padding: 10px;
                height: 120px;
                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;
                cursor: pointer;
            }

                #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));
                }

        /* pop-up ads */
        .divPopupAd {
            position: absolute;
            z-index: 110;
            height: 100px;
        }

        .divPopUpMainContent {
            margin-top: 150px;
        }

        /* pop-up div 'dark box' */
        .divModalDialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            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 within pop-up */
            .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;
            }

                .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);
                }

            /* pop-up image */
            .divModalDialog img {
                padding: 20px;
                z-index: 105;
                border: solid 1px gray;
                cursor: pointer;
                /* 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));
            }

            /* nav: highest z-index */
            .divModalDialog ul li {
                display: inline;
            }

            .divModalDialog ul a {
                padding: 5px;
                font-size: 1.5em;
                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;
                cursor: pointer;
            }
    </style>
</head>

<body>
    <div class="divMiddle" style="text-align:center;">
        <!--FANCY TEXT -->
        <div id="divUpsideDown">CLICK ON IMAGE TO OPEN MODAL POP-UP</div>
        <h1>Clear enough? Modal Pop-up via pure HTML5/CSS3, NO Javascript:)</h1>

        <!-- NAV THUMBNAILS -->
        <div id="divThumbnails">
            <a href="#divModalDialog1" title="Madame Tussauds New York"><img src="http://infosoft.biz/Img/ModalPopupCSS//Travolta.JPG" alt="JOHN TRAVOLTA, NICOLAS CAGE, NY MUSEUM" /></a>
            <a href="#divModalDialog2" title="Titan Atlas, Rockefeller Center Manhattan"><img src="http://infosoft.biz/Img/ModalPopupCSS//TitanicEffortsNY.JPG" alt="TITAN ATLAS NY" /></a>
            <a href="#divModalDialog3" title="Diesel store Manhattan"><img src="http://infosoft.biz/Img/ModalPopupCSS/Diesel.JPG" alt="DIESEL STORE NY" /></a>
            <a href="#divModalDialog4" title="Nereid Thought Rockefeller Center Manhattan"><img src="http://infosoft.biz/Img/ModalPopupCSS/Nereid_Thought.JPG" alt="NEREID THOUGHT NY" /></a>
        </div>

        <!--1st LINK -->
        <div id="divModalDialog1" class="divModalDialog">
            <div class="divPopUpMainContent">
                <h1>DUDE, RU LOOKING FOR FUN IN THE BIG APPLE?</h1>
                <ul>
                    <li><a href="#">NOT REALLY</a></li>
                    <li><a href="http://infosoft.biz/mbus.aspx">YEAH, SHOW ME PLZ!</a></li>
                </ul>
                <a href="http://infosoft.biz/bus.aspx"><img src="http://infosoft.biz/Img/ModalPopupCSS/Travolta.JPG" alt="JOHN TRAVOLTA, NICOLAS CAGE, madame tussauds new york" /></a>
            </div>
        </div>

        <!--2nd LINK -->
        <div id="divModalDialog2" class="divModalDialog">
            <div class="divPopUpMainContent">
                <h1>ARE YOU LOOKING FOR A JOB IN THE BIG APPLE?</h1>
                <ul>
                    <li><a href="#">NOPE</a></li>
                    <li><a href="http://infosoft.biz/Geocoder.aspx">SURE, WANNA JOB IN NYC!</a></li>
                </ul>
                <a href="http://infosoft.biz/Geocoder.aspx" target="_blank"><img src="http://infosoft.biz/Img/ModalPopupCSS/TitanicEffortsNY.JPG" alt="TITAN ATLAS, 5th Avenue New York, Rockefeller Plaza" /></a>
            </div>
        </div>

        <!--3rd LINK -->
        <div id="divModalDialog3" class="divModalDialog">
            <div class="divPopUpMainContent">
                <h1>THERE IS NO PLACE LIKE 127.0.0.1</h1>
                <ul>
                    <li><a href="#">PLZ, CLOSE THIS THING! </a></li>
                    <li><a href="http://infosoft.biz">YEAH, LET'S GO HOME</a></li>
                </ul>
                <a href="http://infosoft.biz"><img src="http://infosoft.biz/Img/ModalPopupCSS/Diesel.JPG" alt="DIESEL STORE NEW YORK CITY, MANHATTAN" /></a>
            </div>
        </div>

        <!--4th LINK -->
        <div id="divModalDialog4" class="divModalDialog">
            <div class="divPopUpMainContent">
                <h1>NEED SOME HELP WITH MATH?</h1>
                <ul>
                    <li><a href="#">C'MON, NOT ME</a></li>
                    <li><a href="http://infosoft.biz/Fractions.aspx">SURE THING, YES!</a></li>
                </ul>
                <a href="http://infosoft.biz/Primes.aspx"><img src="http://infosoft.biz/Img/ModalPopupCSS/Nereid_Thought.JPG" alt="NEREID THOUGHT, Rockefeller Plaza NY cITY" /></a>
            </div>
        </div>
    </body>
</html>

参考文献

在线幻灯片展示作为纯 HTML5/CSS3 解决方案：无需 JavaScript (Codeproject)