CSS3 Modal Popups

CSS3 Modal Popups

83 6042
CSS3 Modal Popups
CSS3 Modal Popups

CSS3 Modal Popups

Today I will tell you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, as it turned out, CSS3 has all the necessary tools for making modal windows too. In our demonstration I have prepared single page with two popup elements: join form and login form. Welcome to test results and understand how it was made.

Live Demo

Ok, download the example files and lets start !


Step 1. HTML

First, lets create the main HTML markup. As you can see – the structure is quite easy. Here are one panel with buttons and two popups. Each of them contains own overlay DIV element and popup DIV element with some content inside and ‘close’ button.

index.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>

Step 2. CSS

I omit styles of layout.css. Here are nothing interesting. The most interesting – next one file (where I have prepared all necessary styles for our modal popups):

css/modal.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;
}

Live Demo

Conclusion

Today we have made another great CSS3 demonstration – popup modal windows. Welcome back to read our new tutorials!

SIMILAR ARTICLES

Practice with Text Shadows

0 312
Responsive HTML Email Template

0 524

83 COMMENTS

  1. Thanks for the idea!
    I like when the forms and other supporting elements on the page are unobtrusive, do not spoil the design of the site and do not overload the page. Modal windows – this is what you need.

  2. Great tutorial and a very useful tool.
    Browsers blocking pop-ups now can go away for lengthy vacation.
    This is what I was looking for.
    Now, will it be possible to have a slideshow (both text and images) on a CSS3 pop-up?
    If that is possible then it will solve screen space issues.
    With a slider in CSS3 pop-up we can add many features without actually taking up the viewport space.
    Thanks for the tutorial and the download.

    • Hi Prodyot,

      Yes, I think that css3 slideshows using css3 popups possible, why not? Just need to think how to make it

    • Hi Marko,
      Of course this is possible, if you don’t need registration part – just remove it. This is easy.

  3. Hi Friend,

    I’ve placed a select-box with some options in the popup but the select options are not click-able :(

    Please add following select-box in popup and try selecting the options.

    10
    20
    30

    Thank you.

    • Hello Bivek,
      Yes, thanks for this remark, if you want to use selectors here – try to deactivate ‘transform: translate’ styles from our CSS file – it should work in this case.

  4. Did anyone try of using select menu with this popup. In my case its not working. Please suggest why select not working?

  5. Hello,

    Very nice tutorial.
    The problem i have in IE9 is that the animation is not working and i don’t get the cursor in the input type=”text”, so i can’t see in which textbox i am typing. How can i fix that? In Chrome and Firefox it’s works fine.

    Thank you!

    Maurice

    • Hello,
      Yes, I know, IE9 doesn’t support CSS3 transitions, this is why animation doesn’t work here. In case of textboxes (IE), – you should remove
      ms-transform: translate
      property

  6. Hey great popup…!!

    It does work in IE9 but why does it not work in IE8 and could you recommend a solution/workaround for IE8?
    Thanks!!
    marcos

  7. Its awesome! Very well working with Google chrome and IE9. But how it will work in IE7 and IE8… :( otherwise need to do something else.. Please Help

  8. hey nice ever

    why is not working on IE but i did remove ms-transform: translate
    nothing is showing please hel!!

    • Hello Ravi,
      In this case you should find a way how to achieve it. As for instance, you will need to define two different popups (with different positions), then, maybe find something better for overlays…

  9. Hi,

    Love this script, so simple and looks great.

    I was just wondering if it was possible to load the modal on pageload, rather than a link.

    Thanks!

  10. hi great tut btw i want to make a 3rd form but it just brings the overlay av changed the popup id what i mean is #join_form and #login_form i’ds are already used now i want another one with lost password i changed the id to #lost_pass but its not working any ideas

    • Hi Sunny,
      You always can add new objects, you don’t need to use already used names, it would be better to use new names, for instance: lost_pass (as you mentioned). But, don’t forget that you will need to add some CSS styles (pay attention, that some styles were already added for a#login_pop and a#join_pop, also, don’t forget to add the overlay for your third form

  11. Hi, nice job. But I’ll would like if possible the popup doesn’t close on outside click??
    Thanks.
    Sorry my english.

  12. Hi All!.

    Very nice pop-up sample!

    Is it possible to load the pop-up automaticly when i load the webpage?
    And what sould be the code for that.

    Thanks!

  13. I have other question. I would like set focus on the username (or other field in the form) when show div. I can’t make it!!!

    • Hi Yuri,
      When you have opened a popup, you can easily click the ‘Tab’ key once to set the focus on first element

      • Yes, when the content is too long (huge) the scroll does not work. When you scroll with that large popup open, it scrolls the background but not the content in the modal window. How do we change control to modal window on the modals that has large content please?

      • Hi Sunny,
        Indeed, by default, the scroller belongs to the page body. And, if you need to have another scroller for another element, you will need to limit your object with some certain height, and then add the following style: overflow-y: scroll;

    • Hi Franko,
      In your case you will need to change logic of overlays, and .. for instance you can use:
      <a id="login_form" class="overlay" href="#login_form"></a>
      (it will prevent redirecting to #x page (it will still stay on #login_form)

  14. Esc Button not working when i Click on it. how to make it
    and
    i am trying to make both login and signup popups into one popups
    can you help me out

    • Hello Dushyant,
      clicking on the button can not be handled only by the CSS3. You will need to use JavaScript to handle it.

  15. Hi! First of all: great solution, thanks. Is it possible to make “back” and “forward” buttons of browsers work correctly after popup usages? #anchor links make it impossible.

    • Hi Andy,
      What do you mean – back and forward? If you have multiple pages – you may just use different anchor links to other elements to perform smooth switching

  16. Great tutorial. Thank you very much Andrew.
    One question: I want to replace the ‘X’ with a Cancel button to close the popup. How can that be achieved?
    Can the same approach be used for closing the popup after successful login?

    Thanks in advance.

    • Hello Jabir,
      This is pretty easy, because this button is implemented via ‘content’ css property:
      .close:before {
      content: “X”;
      you may just change this content value to ‘close’

  17. very cool this is something I’ve been looking for. I take it that this cannot be in a php document. I tried and even with no actual php code it stops working just being in a php document.. is javascript the only way to interact with the forms?

    • Hello Steve,
      It can work with any server language, it doesn’t matter what language you use to produce HTML code.

Leave a Reply