Home » Tutorials

CSS3 Modal Popups

Tutorials
Author Reading 12 min Views 1.2k. Published by Modified by

CSS popup. 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.

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/modal.css
  5. Conclusion
Live Demo

[sociallocker]

download result

[/sociallocker]

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

01 <html lang="en" >
02     <head>
03         <meta charset="utf-8" />
04         <title>CSS3 Modal Popups | Script Tutorials</title>
05         <link href="css/layout.css" rel="stylesheet" type="text/css" />
06         <link href="css/modal.css" rel="stylesheet" type="text/css" />
07     </head>
08     <body>
09         <header>
10             <h2>CSS3 Modal Popups</h2>
11             <a href="https://www.script-tutorials.com/css3-modal-popups/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
12         </header>
13         <!-- panel with buttons -->
14         <div class="main">
15             <div class="panel">
16                 <a href="#login_form" id="login_pop">Log In</a>
17                 <a href="#join_form" id="join_pop">Sign Up</a>
18             </div>
19         </div>
20         <!-- popup form #1 -->
21         <a href="#x" class="overlay" id="login_form"></a>
22         <div class="popup">
23             <h2>Welcome Guest!</h2>
24             <p>Please enter your login and password here</p>
25             <div>
26                 <label for="login">Login</label>
27                 <input type="text" id="login" value="" />
28             </div>
29             <div>
30                 <label for="password">Password</label>
31                 <input type="password" id="password" value="" />
32             </div>
33             <input type="button" value="Log In" />
34             <a class="close" href="#close"></a>
35         </div>
36         <!-- popup form #2 -->
37         <a href="#x" class="overlay" id="join_form"></a>
38         <div class="popup">
39             <h2>Sign Up</h2>
40             <p>Please enter your details here</p>
41             <div>
42                 <label for="email">Login (Email)</label>
43                 <input type="text" id="email" value="" />
44             </div>
45             <div>
46                 <label for="pass">Password</label>
47                 <input type="password" id="pass" value="" />
48             </div>
49             <div>
50                 <label for="firstname">First name</label>
51                 <input type="text" id="firstname" value="" />
52             </div>
53             <div>
54                 <label for="lastname">Last name</label>
55                 <input type="text" id="lastname" value="" />
56             </div>
57             <input type="button" value="Sign Up" />&nbsp;&nbsp;&nbsp;or&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Log In</a>
58             <a class="close" href="#close"></a>
59         </div>
60     </body>
61 </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

001 .main {
002     background: #aaa url(../images/bg.jpg) no-repeat;
003     width: 800px;
004     height: 600px;
005     margin: 50px auto;
006 }
007 .panel {
008     background-color: #444;
009     height: 34px;
010     padding: 10px;
011 }
012 .panel a#login_pop, .panel a#join_pop {
013     border: 2px solid #aaa;
014     color: #fff;
015     display: block;
016     float: right;
017     margin-right: 10px;
018     padding: 5px 10px;
019     text-decoration: none;
020     text-shadow: 1px 1px #000;
021     -webkit-border-radius: 10px;
022     -moz-border-radius: 10px;
023     -ms-border-radius: 10px;
024     -o-border-radius: 10px;
025     border-radius: 10px;
026 }
027 a#login_pop:hover, a#join_pop:hover {
028     border-color: #eee;
029 }
030 .overlay {
031     background-color: rgba(0, 0, 0, 0.6);
032     bottom: 0;
033     cursor: default;
034     left: 0;
035     opacity: 0;
036     position: fixed;
037     right: 0;
038     top: 0;
039     visibility: hidden;
040     z-index: 1;
041     -webkit-transition: opacity .5s;
042     -moz-transition: opacity .5s;
043     -ms-transition: opacity .5s;
044     -o-transition: opacity .5s;
045     transition: opacity .5s;
046 }
047 .overlay:target {
048     visibility: visible;
049     opacity: 1;
050 }
051 .popup {
052     background-color: #fff;
053     border: 3px solid #fff;
054     display: inline-block;
055     left: 50%;
056     opacity: 0;
057     padding: 15px;
058     position: fixed;
059     text-align: justify;
060     top: 40%;
061     visibility: hidden;
062     z-index: 10;
063     -webkit-transform: translate(-50%, -50%);
064     -moz-transform: translate(-50%, -50%);
065     -ms-transform: translate(-50%, -50%);
066     -o-transform: translate(-50%, -50%);
067     transform: translate(-50%, -50%);
068     -webkit-border-radius: 10px;
069     -moz-border-radius: 10px;
070     -ms-border-radius: 10px;
071     -o-border-radius: 10px;
072     border-radius: 10px;
073     -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
074     -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
075     -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
076     -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
077     box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
078     -webkit-transition: opacity .5s, top .5s;
079     -moz-transition: opacity .5s, top .5s;
080     -ms-transition: opacity .5s, top .5s;
081     -o-transition: opacity .5s, top .5s;
082     transition: opacity .5s, top .5s;
083 }
084 .overlay:target+.popup {
085     top: 50%;
086     opacity: 1;
087     visibility: visible;
088 }
089 .close {
090     background-color: rgba(0, 0, 0, 0.8);
091     height: 30px;
092     line-height: 30px;
093     position: absolute;
094     right: 0;
095     text-align: center;
096     text-decoration: none;
097     top: -15px;
098     width: 30px;
099     -webkit-border-radius: 15px;
100     -moz-border-radius: 15px;
101     -ms-border-radius: 15px;
102     -o-border-radius: 15px;
103     border-radius: 15px;
104 }
105 .close:before {
106     color: rgba(255, 255, 255, 0.9);
107     content: "X";
108     font-size: 24px;
109     text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
110 }
111 .close:hover {
112     background-color: rgba(64, 128, 128, 0.8);
113 }
114 .popup p, .popup div {
115     margin-bottom: 10px;
116 }
117 .popup label {
118     display: inline-block;
119     text-align: left;
120     width: 120px;
121 }
122 .popup input[type="text"], .popup input[type="password"] {
123     border: 1px solid;
124     border-color: #999 #ccc #ccc;
125     margin: 0;
126     padding: 2px;
127     -webkit-border-radius: 2px;
128     -moz-border-radius: 2px;
129     -ms-border-radius: 2px;
130     -o-border-radius: 2px;
131     border-radius: 2px;
132 }
133 .popup input[type="text"]:hover, .popup input[type="password"]:hover {
134     border-color: #555 #888 #888;
135 }
Live Demo

Conclusion

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

Rate article
© 2026 Script Tutorials