0

本教程教授如何在 CSS3 中创建模式窗口。它在 Chrome 和 Firefox 上完美运行。但是,Internet Explorer 不会加载任何包含主题标签的链接。

第一个链接有源代码,但我将在下面发布一个副本以供将来参考。

HTML

<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Modal Popups | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/modal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Modal Popups</h2>
            <a href="http://www.script-tutorials.com/css3-modal-popups/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <!-- panel with buttons -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Log In</a>
                <a href="#join_form" id="join_pop">Sign Up</a>
            </div>
        </div>
        <!-- popup form #1 -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Welcome Guest!</h2>
            <p>Please enter your login and password here</p>
            <div>
                <label for="login">Login</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Password</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Log In" />
            <a class="close" href="#close"></a>
        </div>
        <!-- popup form #2 -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Sign Up</h2>
            <p>Please enter your details here</p>
            <div>
                <label for="email">Login (Email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Password</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">First name</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Last name</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Sign Up" />&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Log In</a>
            <a class="close" href="#close"></a>
        </div>
    </body>
</html>

CSS

    .main {
        background: #aaa url(../images/bg.jpg) no-repeat;
        width: 800px;
        height: 600px;
        margin: 50px auto;
    }
    .panel {
        background-color: #444;
        height: 34px;
        padding: 10px;
    }
    .panel a#login_pop, .panel a#join_pop {
        border: 2px solid #aaa;
        color: #fff;
        display: block;
        float: right;
        margin-right: 10px;
        padding: 5px 10px;
        text-decoration: none;
        text-shadow: 1px 1px #000;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }
    a#login_pop:hover, a#join_pop:hover {
        border-color: #eee;
    }
    .overlay {
        background-color: rgba(0, 0, 0, 0.6);
        bottom: 0;
        cursor: default;
        left: 0;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 0;
        visibility: hidden;
        z-index: 1;

        -webkit-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
    }
    .overlay:target {
        visibility: visible;
        opacity: 1;
    }
    .popup {
        background-color: #fff;
        border: 3px solid #fff;
        display: inline-block;
        left: 50%;
        opacity: 0;
        padding: 15px;
        position: fixed;
        text-align: justify;
        top: 40%;
        visibility: hidden;
        z-index: 10;

        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;

        -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
        box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

        -webkit-transition: opacity .5s, top .5s;
        -moz-transition: opacity .5s, top .5s;
        -ms-transition: opacity .5s, top .5s;
        -o-transition: opacity .5s, top .5s;
        transition: opacity .5s, top .5s;
    }
    .overlay:target+.popup {
        top: 50%;
        opacity: 1;
        visibility: visible;
    }
    .close {
        background-color: rgba(0, 0, 0, 0.8);
        height: 30px;
        line-height: 30px;
        position: absolute;
        right: 0;
        text-align: center;
        text-decoration: none;
        top: -15px;
        width: 30px;

        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
        border-radius: 15px;
    }
    .close:before {
        color: rgba(255, 255, 255, 0.9);
        content: "X";
        font-size: 24px;
        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    }
    .close:hover {
        background-color: rgba(64, 128, 128, 0.8);
    }
    .popup p, .popup div {
        margin-bottom: 10px;
    }
    .popup label {
        display: inline-block;
        text-align: left;
        width: 120px;
    }
    .popup input[type="text"], .popup input[type="password"] {
        border: 1px solid;
        border-color: #999 #ccc #ccc;
        margin: 0;
        padding: 2px;

        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
    }
    .popup input[type="text"]:hover, .popup input[type="password"]:hover {
        border-color: #555 #888 #888;
    }
4

1 回答 1

1

我之前在 Internet Explorer 中的 hashchange 事件中遇到过这个问题,所以我写了这段代码(由我保证到 IE7):

将类添加hash-modifier到您拥有的每个修改 url 哈希的元素。

JavaScript:

$(function () {
        var hashchangeHandler = function () {
            switch (location.hash.replace(/^.*#/, '')) {
                case 'sign-up':
                    alert('signing up/opening sign-up modal');
                    break;
                case 'login':
                    alert('logging in/showing login modal');
                    break;
                default:
                    // do default something

            }
        }

        BindHashChangeEventListener(hashchangeHandler);

        // Run the initial hashHandler function on document ready
        hashchangeHandler();
    });


    function BindHashChangeEventListener(hashHandler) {
        if (("onhashchange" in window) && !($.browser.msie)) {
            // Use built-in jQuery hashchange event
            $(window).bind('hashchange', hashHandler);
        } else {
            //IE and browsers that don't support hashchange
            $('.hash-modifier').on('click', function () {
                setTimeout(hashHandler, 50);
            });
        }
    }

HTML:

<a href="#sign-up" class="hash-modifier">sign up</a>
<a href="#login" class="hash-modifier">login</a>
于 2012-12-08T06:15:12.160 回答