Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 19 » CSS3 Модальные всплывающие окна


14:11
CSS3 Модальные всплывающие окна

CSS3 Модальные всплывающие окна


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

ДЕМО                 СКАЧАТЬ ИСХОДНИК


 

Шаг 1. HTML

Во-первых, давайте создадим основной раздел разметки HTML. Как вы можете видеть - структура довольно простая. Вот одна панель с кнопками и двумя всплывающими окнами. Каждая из них содержит собственный элемент DIV наложения и всплывающее окно элемента DIV с некоторым содержимым внутри и кнопку «Закрыть».

index.html

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title> CSS3 Модальные всплывающие окна | Учебники Script </ title>

        <link href="css/layout.css" rel="stylesheet" type="text/css" />

        <link href="css/modal.css" rel="stylesheet" type="text/css" />

    </ HEAD>

    <body>

        <header>

            <h2> CSS3 Модальные всплывающие окна </ h2>

            <a href="http://www.script-tutorials.com/css3-modal-popups/" class="stuts"> Вернуться к оригиналу учебник по Обучающие <span> Script </ span> </ a>

        </ Заголовок>

 

        <! - Панель с кнопками ->

        <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="Log In" />

 

            <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"> Логин (e-mail) </ 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="Sign Up" /> или <a href="#login_form" id="login_pop"> Вход </ a>

 

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

        </ Div>

    </ Body>

</ Html>

 

Шаг 2. CSS

Я опускаю описание стилей layout.css. Здесь ничего интересного. Самое интересное - Следующий файл (я подготовил все необходимые стили для нашего модального всплывающего окна):

CSS / modal.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;

}

 


ДЕМО              СКАЧАТЬ ИСХОДНИК


Источник    урока

Категория: CSS//HTML//JS | Просмотров: 1058 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди