
Сделаем модальное всплывающее окно на CSS3. Обычно для получения такого эффекта используется jQuery. Но CSS3 имеет все необходимые инструменты для реализации такого функционала. В демонстрации подготовлена одна страница с двумя всплывающими окнами: форма регистрации и форма входа.
Разметка HTML
Структура разметки достаточно проста. Имеется одна панель с кнопками и два всплывающих элемента. Каждый содержит перекрывающий слой в элементе div
и некоторое содержание с кнопкой для закрытия окна.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
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="Регистрация" /> или <a href="#login_form" id="login_pop">Войти</a> 59 60 <a class="close" href="#close"></a> 61 </div> 62 </body> 63 </html> |
CSS
А вот и стили для формирования модальных окон:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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