Информация к новости
  • Просмотров: 625
  • Автор: sulicompany
  • Дата: 20-12-2012, 21:48
 (голосов: 0)
20-12-2012, 21:48

Модальные окна регистрации на CSS3

Категория: Программирование » CSS


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

Разметка HTML

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

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

CSS

А вот и стили для формирования модальных окон:

001 .main {
002     background#aaaurl(../images/bg.jpg) no-repeat;
003     width800px;
004     height600px;
005     margin50pxauto;
006 }
007 .panel {
008     background-color#444;
009     height34px;
010     padding10px;
011 }
012 .panel a#login_pop, .panel a#join_pop {
013     border2pxsolid#aaa;
014     color#fff;
015     displayblock;
016     floatright;
017     margin-right10px;
018     padding5px10px;
019     text-decorationnone;
020     text-shadow1px1px#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(0000.6);
033     bottom0;
034     cursordefault;
035     left0;
036     opacity: 0;
037     positionfixed;
038     right0;
039     top0;
040     visibilityhidden;
041     z-index1;
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     visibilityvisible;
051     opacity: 1;
052 }
053 .popup {
054     background-color#fff;
055     border3pxsolid#fff;
056     display: inline-block;
057     left50%;
058     opacity: 0;
059     padding15px;
060     positionfixed;
061     text-alignjustify;
062     top40%;
063     visibilityhidden;
064     z-index10;
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: 01px1px2pxrgba(0000.4inset;
079     -moz-box-shadow: 01px1px2pxrgba(0000.4inset;
080     -ms-box-shadow: 01px1px2pxrgba(0000.4inset;
081     -o-box-shadow: 01px1px2pxrgba(0000.4inset;
082     box-shadow: 01px1px2pxrgba(0000.4inset;
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