CSS3 Modal Popups

CSS3 Modal Popups

83 3079
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

Sliding single-level menu

0 139

83 COMMENTS

  1. Hi Andrew,

    I can show the popup on my local laptop without any difficulties. However, after I copy the code to the webserver. The popup cannot be shown.
    If I click my popup link, the the popup is still invisible, even though I can see the focus moved. But if I open the link as a new tab, I can see the popup window.
    Is that an issue on the server site?

    Thanks

    • Hi Yogi,
      One of possible reasons of this problem may be – styles (or html markup). You should pay attention to the styles which open the popups:
      .overlay:target+.popup

  2. Couldn’t get it to work, then finally I said, hey, maybe I should try it on IE9… Perfect!
    fterwards I noticed all the other replies reagrding IE8 and so on.
    Thank you very much, this was a great help!

  3. Hello admin..
    i think this is popup is not working in Internet Explore..can you help me how to solve this problem…

  4. Can you please tell that can i insert the data in the database or how can i communicate with the database using this model box

    • Hi Tauseef,
      In order to work with database, first thing you need to do is to transfer your data to your server. And only after you will be able to work with your server’s database (using one of server languages, e.g.: PHP)

  5. Thanks for the great tutorial. When I close the pop up and hit ‘back’ in my browser, the popup reappears. Is there a way of avoiding that? Eg Page1, Page2, Popup, close, Page1.

    • Hi Adam,
      I think that you should start to unleash to use this button (back) in your browser. Most websites are developed so, that we don’t need to use this button at all, because we always can navigate anywhere without this ‘back’ button. Anyway, if you prefer to hide the popups when you click the ‘back’ button – you will need to attach javascript, that will clean the address bar any time you close popup windows. Unfortunately it is impossible with only CSS

  6. Hi Andrew,
    Your script is great and save my time. I think how can I do one thing. I have html form with checkbox group, and other fields. Checkbox group is hidden and visible in your modal window only when user click on link at page. I want to do that when user check something and close modal, checked values are appear on page below link to modal. Can you help me?

    • Hello Pawel,
      I am sorry, I don’t understand you well. I think, that if you need to display some certain values from certain fields of the popup form – you will need to use javascript to get the values of the form, right?

  7. hello

    i used this code for my site but it not work on IE can you please help me how to rectify this issue from my web site. it is very important for me to set the pop up

    • Minakshi,
      The CSS3-based modal popups work good in IE10 and above. CSS3 is not fully supported in lower versions of this browser.

  8. Hi, i used your popup to show a table content but I’m facing a problem. when i replace login form with my table codes. The problem was texts and images of my page are showing above popup window and popup window is not showing in the middle of display. So please tell me how can i modify it…

    • Hi Manish,
      I suggest that you check z-indexes of your interface, because they can be bigger than z-index of the popup box.

  9. Thanks, great work. What would be the proper way to programmatically close the modal dialog? Example: make a selection from a drop down list of items, then click a button to “use” the item selected on the page that called the popup. Have all that working with exception of figuring out how to close the popup programmatically.

  10. It is possible to do something to don’t add to browser history # tag ? in jquery.
    Problem it is when I use back button in browser and first I click some popups.
    I want back to previous page without # tags.

    • Hi Pawel, this allows us to use only css3 (with using of :target selector) to work with popups. If you don’t want to display any hashtags in browser address bar, you will need to consider another (javascript) solution rather than css3

  11. Hi,
    I am sending the email and password to server on submit the login form, and if it’s invalid, then I am redirecting to home page. I want to open the pop up automatically as my home page loaded on that time. but I am not finding the way that how to call the popup automatically.

    • Hi Avadhesh, to open the popup automatically, you need to add ID of the popup to the address. Or, you can also use AJAX to check if email and password is wrong.

  12. Mr.Andrew,
    Thanks for you tutorial.When I change the image in your model.css it will not work.I also want to know how to reduce the width and height of main content with image background.
    Please advise
    thanks

    • Hi Raghavendra, it doesn’t matter what images you use in css. With regards to bounding borders, refer to .main styles

Leave a Reply