Модальные окна на CSS3 - Дмитрий Амоти

Сделаем модальное всплывающее окно на CSS3. Обычно для получения такого эффекта используется jQuery. Но CSS3 имеет все необходимые инструменты для реализации такого функционала. В демонстрации подготовлена одна страница с двумя всплывающими окнами: форма регистрации и форма входа.

Разметка HTML

Структура разметки достаточно проста. Имеется одна панель с кнопками и два всплывающих элемента. Каждый содержит перекрывающий слой в элементе div и некоторое содержание с кнопкой для закрытия окна.

01	<html lang="ru" >
02	    <head>
03	        <meta charset="utf-8" />
04	        <title>Модальное окно на CSS3 | Материалы сайта RUSELLER.COM</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	 
10	        <!-- Панель с кнопками -->
11	        <div class="main">
12	            <div class="panel">
13	                <a href="#login_form" id="login_pop">Войти</a>
14	                <a href="#join_form" id="join_pop">Регистрация</a>
15	            </div>
16	 
17	        </div>
18	 
19	        <!-- Форма №1 для модального окна -->
20	        <a href="#x" class="overlay" id="login_form"></a>
21	        <div class="popup">
22	            <h2>Здравствуй, Гость!</h2>
23	            <p>Вводи свой псевдоним и пароль</p>
24	            <div>
25	                <label for="login">Псевдоним</label>
26	                <input type="text" id="login" value="" />
27	            </div>
28	            <div>
29	                <label for="password">Пароль</label>
30	                <input type="password" id="password" value="" />
31	            </div>
32	            <input type="button" value="Войти" />
33	 
34	            <a class="close" href="#close"></a>
35	        </div>
36	 
37	        <!-- Форма №2 для модального окна -->
38	        <a href="#x" class="overlay" id="join_form"></a>
39	        <div class="popup">
40	            <h2>Регистрация</h2>
41	            <p>Нужно о себе кое-что рассказать</p>
42	            <div>
43	                <label for="email">Псевдоним (email)</label>
44	                <input type="text" id="email" value="" />
45	            </div>
46	            <div>
47	                <label for="pass">Пароль</label>
48	                <input type="password" id="pass" value="" />
49	            </div>
50	            <div>
51	                <label for="firstname">Имя</label>
52	                <input type="text" id="firstname" value="" />
53	            </div>
54	            <div>
55	                <label for="lastname">Фамилия</label>
56	                <input type="text" id="lastname" value="" />
57	            </div>
58	            <input type="button" value="Регистрация" />&nbsp;&nbsp;&nbsp;или&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Войти</a>
59	 
60	            <a class="close" href="#close"></a>
61	        </div>
62	    </body>
63	</html>

01 <html lang="ru" >

02 <head>

03 <meta charset="utf-8" />

04 <title>Модальное окно на CSS3 | Материалы сайта RUSELLER.COM</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>

10

11 <div class="main">

12 <div class="panel">

13 <a href="#login_form" id="login_pop">Войти</a>

14 <a href="#join_form" id="join_pop">Регистрация</a>

15 </div>

17 </div>

19

20 <a href="#x" class="overlay" id="login_form"></a>

21 <div class="popup">

22 <h2>Здравствуй, Гость!</h2>

23 <p>Вводи свой псевдоним и пароль</p>

24 <div>

25 <label for="login">Псевдоним</label>

26 <input type="text" id="login" value="" />

27 </div>

28 <div>

29 <label for="password">Пароль</label>

30 <input type="password" id="password" value="" />

31 </div>

32 <input type="button" value="Войти" />

34 <a class="close" href="#close"></a>

35 </div>

37

38 <a href="#x" class="overlay" id="join_form"></a>

39 <div class="popup">

40 <h2>Регистрация</h2>

41 <p>Нужно о себе кое-что рассказать</p>

42 <div>

43 <label for="email">Псевдоним (email)</label>

44 <input type="text" id="email" value="" />

45 </div>

46 <div>

47 <label for="pass">Пароль</label>

48 <input type="password" id="pass" value="" />

49 </div>

50 <div>

51 <label for="firstname">Имя</label>

52 <input type="text" id="firstname" value="" />

53 </div>

54 <div>

55 <label for="lastname">Фамилия</label>

56 <input type="text" id="lastname" value="" />

57 </div>

58 <input type="button" value="Регистрация" />   или   <a href="#login_form" id="login_pop">Войти</a>

60 <a class="close" href="#close"></a>

61 </div>

62 </body>

63 </html>

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	 
022	    -webkit-border-radius: 10px;
023	    -moz-border-radius: 10px;
024	    -ms-border-radius: 10px;
025	    -o-border-radius: 10px;
026	    border-radius: 10px;
027	}
028	a#login_pop:hover, a#join_pop:hover {
029	    border-color: #eee;
030	}
031	.overlay {
032	    background-color: rgba(0, 0, 0, 0.6);
033	    bottom: 0;
034	    cursor: default;
035	    left: 0;
036	    opacity: 0;
037	    position: fixed;
038	    right: 0;
039	    top: 0;
040	    visibility: hidden;
041	    z-index: 1;
042	 
043	    -webkit-transition: opacity .5s;
044	    -moz-transition: opacity .5s;
045	    -ms-transition: opacity .5s;
046	    -o-transition: opacity .5s;
047	    transition: opacity .5s;
048	}
049	.overlay:target {
050	    visibility: visible;
051	    opacity: 1;
052	}
053	.popup {
054	    background-color: #fff;
055	    border: 3px solid #fff;
056	    display: inline-block;
057	    left: 50%;
058	    opacity: 0;
059	    padding: 15px;
060	    position: fixed;
061	    text-align: justify;
062	    top: 40%;
063	    visibility: hidden;
064	    z-index: 10;
065	 
066	    -webkit-transform: translate(-50%, -50%);
067	    -moz-transform: translate(-50%, -50%);
068	    -ms-transform: translate(-50%, -50%);
069	    -o-transform: translate(-50%, -50%);
070	    transform: translate(-50%, -50%);
071	 
072	    -webkit-border-radius: 10px;
073	    -moz-border-radius: 10px;
074	    -ms-border-radius: 10px;
075	    -o-border-radius: 10px;
076	    border-radius: 10px;
077	 
078	    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
079	    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
080	    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
081	    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
082	    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
083	 
084	    -webkit-transition: opacity .5s, top .5s;
085	    -moz-transition: opacity .5s, top .5s;
086	    -ms-transition: opacity .5s, top .5s;
087	    -o-transition: opacity .5s, top .5s;
088	    transition: opacity .5s, top .5s;
089	}
090	.overlay:target+.popup {
091	    top: 50%;
092	    opacity: 1;
093	    visibility: visible;
094	}
095	.close {
096	    background-color: rgba(0, 0, 0, 0.8);
097	    height: 30px;
098	    line-height: 30px;
099	    position: absolute;
100	    right: 0;
101	    text-align: center;
102	    text-decoration: none;
103	    top: -15px;
104	    width: 30px;
105	 
106	    -webkit-border-radius: 15px;
107	    -moz-border-radius: 15px;
108	    -ms-border-radius: 15px;
109	    -o-border-radius: 15px;
110	    border-radius: 15px;
111	}
112	.close:before {
113	    color: rgba(255, 255, 255, 0.9);
114	    content: "X";
115	    font-size: 24px;
116	    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
117	}
118	.close:hover {
119	    background-color: rgba(64, 128, 128, 0.8);
120	}
121	.popup p, .popup div {
122	    margin-bottom: 10px;
123	}
124	.popup label {
125	    display: inline-block;
126	    text-align: left;
127	    width: 120px;
128	}
129	.popup input[type="text"], .popup input[type="password"] {
130	    border: 1px solid;
131	    border-color: #999 #ccc #ccc;
132	    margin: 0;
133	    padding: 2px;
134	 
135	    -webkit-border-radius: 2px;
136	    -moz-border-radius: 2px;
137	    -ms-border-radius: 2px;
138	    -o-border-radius: 2px;
139	    border-radius: 2px;
140	}
141	.popup input[type="text"]:hover, .popup input[type="password"]:hover {
142	    border-color: #555 #888 #888;
143	}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

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

022 -webkit-border-radius: 10px;

023 -moz-border-radius: 10px;

024 -ms-border-radius: 10px;

025 -o-border-radius: 10px;

026 border-radius: 10px;

027 }

028 a#login_pop:hover, a#join_pop:hover {

029 border-color: #eee;

030 }

031 .overlay {

032 background-color: rgba(0, 0, 0, 0.6);

033 bottom: 0;

034 cursor: default;

035 left: 0;

036 opacity: 0;

037 position: fixed;

038 right: 0;

039 top: 0;

040 visibility: hidden;

041 z-index: 1;

042

043 -webkit-transition: opacity .5s;

044 -moz-transition: opacity .5s;

045 -ms-transition: opacity .5s;

046 -o-transition: opacity .5s;

047 transition: opacity .5s;

048 }

049 .overlay:target {

050 visibility: visible;

051 opacity: 1;

052 }

053 .popup {

054 background-color: #fff;

055 border: 3px solid #fff;

056 display: inline-block;

057 left: 50%;

058 opacity: 0;

059 padding: 15px;

060 position: fixed;

061 text-align: justify;

062 top: 40%;

063 visibility: hidden;

064 z-index: 10;

065

066 -webkit-transform: translate(-50%, -50%);

067 -moz-transform: translate(-50%, -50%);

068 -ms-transform: translate(-50%, -50%);

069 -o-transform: translate(-50%, -50%);

070 transform: translate(-50%, -50%);

071

072 -webkit-border-radius: 10px;

073 -moz-border-radius: 10px;

074 -ms-border-radius: 10px;

075 -o-border-radius: 10px;

076 border-radius: 10px;

077

078 -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

079 -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

080 -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

081 -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

082 box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

083

084 -webkit-transition: opacity .5s, top .5s;

085 -moz-transition: opacity .5s, top .5s;

086 -ms-transition: opacity .5s, top .5s;

087 -o-transition: opacity .5s, top .5s;

088 transition: opacity .5s, top .5s;

089 }

090 .overlay:target+.popup {

091 top: 50%;

092 opacity: 1;

093 visibility: visible;

094 }

095 .close {

096 background-color: rgba(0, 0, 0, 0.8);

097 height: 30px;

098 line-height: 30px;

099 position: absolute;

100 right: 0;

101 text-align: center;

102 text-decoration: none;

103 top: -15px;

104 width: 30px;

105

106 -webkit-border-radius: 15px;

107 -moz-border-radius: 15px;

108 -ms-border-radius: 15px;

109 -o-border-radius: 15px;

110 border-radius: 15px;

111 }

112 .close:before {

113 color: rgba(255, 255, 255, 0.9);

114 content: "X";

115 font-size: 24px;

116 text-shadow: 0 -1px rgba(0, 0, 0, 0.9);

117 }

118 .close:hover {

119 background-color: rgba(64, 128, 128, 0.8);

120 }

121 .popup p, .popup div {

122 margin-bottom: 10px;

123 }

124 .popup label {

125 display: inline-block;

126 text-align: left;

127 width: 120px;

128 }

129 .popup input[type="text"], .popup input[type="password"] {

130 border: 1px solid;

131 border-color: #999 #ccc #ccc;

132 margin: 0;

133 padding: 2px;

134

135 -webkit-border-radius: 2px;

136 -moz-border-radius: 2px;

137 -ms-border-radius: 2px;

138 -o-border-radius: 2px;

139 border-radius: 2px;

140 }

141 .popup input[type="text"]:hover, .popup input[type="password"]:hover {

142 border-color: #555 #888 #888;

143 }

Готово! Источник: ruseller.com

Разметка HTML

Добавить комментарий Отменить ответ