个人中心
gpt4 book ai didi

css - 如何使主题标签链接在 Internet Explorer 上工作？

转载 作者：太空宇宙 更新时间：2023-11-04 15:27:54 25 4
gpt4 key购买 nike

本教程介绍如何在 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;
    }

最佳答案

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

Add class hash-modifier to every element that you have that modifies the url hash.

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>

关于css - 如何使主题标签链接在 Internet Explorer 上工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13774881/

25 4 0
文章推荐： javascript - 将鼠标悬停在文本上时显示 iframe
文章推荐： c# - 通过 C# 代码启用/禁用 标签
文章推荐： java - 如何在 JSP 中选择下拉列表更改时设置值
文章推荐： html - 如何使用 HTML5 创建测验
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com