Home/ Questions/Q 8955889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T14:39:25+00:00

This tutorial teaches how to create modal windows in CSS3. It works perfectly on

  • 0

This tutorial teaches how to create modal windows in CSS3. It works perfectly on Chrome and Firefox. However, Internet Explorer doesn’t load any of the links containing hashtags.

The first link has the source code but I’ll post a copy below for future reference.

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;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve run into this problem before with hashchange events in internet explorer, so I wrote this code (Guaranteed by me down to 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>
    • 0