Модальные окна на CSS3

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

 

Разметка HTML

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

<html lang="ru" >
    <head>
        <meta charset="utf-8" />
        <title>Модальное окно на CSS3 | Материалы сайта RUSELLER.COM</title>
        <link href="/css/layout.css" rel="stylesheet" type="text/css" />
        <link href="/css/modal.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

        <!-- Панель с кнопками -->
        <div class="main">
            <div class="panel">
                <a href="#login_form" id="login_pop">Войти</a>
                <a href="#join_form" id="join_pop">Регистрация</a>
            </div>

        </div>

        <!-- Форма №1 для модального окна -->
        <a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <h2>Здравствуй, Гость!</h2>
            <p>Вводи свой псевдоним и пароль</p>
            <div>
                <label for="login">Псевдоним</label>
                <input type="text" id="login" value="" />
            </div>
            <div>
                <label for="password">Пароль</label>
                <input type="password" id="password" value="" />
            </div>
            <input type="button" value="Войти" />

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

        <!-- Форма №2 для модального окна -->
        <a href="#x" class="overlay" id="join_form"></a>
        <div class="popup">
            <h2>Регистрация</h2>
            <p>Нужно о себе кое-что рассказать</p>
            <div>
                <label for="email">Псевдоним (email)</label>
                <input type="text" id="email" value="" />
            </div>
            <div>
                <label for="pass">Пароль</label>
                <input type="password" id="pass" value="" />
            </div>
            <div>
                <label for="firstname">Имя</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname">Фамилия</label>
                <input type="text" id="lastname" value="" />
            </div>
            <input type="button" value="Регистрация" />&nbsp;&nbsp;&nbsp;или&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Войти</a>

            <a class="close" href="#close"></a>
        </div>
    </body>
</html>


 

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;
}

 

Готово!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/VKspgO_kjwA/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Модальные окна на CSS3 | | 2012-06-19 11:58:45 | | Статьи Web-мастеру | | Сделаем модальное всплывающее окно на CSS3. Обычно для получения такого эффекта используется jQuery. Но CSS3 имеет все необходимые инструменты для реализации такого функционала. В демонстрации | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: