BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Всплывающее модальное окно для сайта

Всплывающее модальное окно для сайта

2015-09-26 / Вр:11:47 / просмотров: 2756

Всплывающее модальное окно для сайта

Всем привет!
Ох, и не на шутку я разошелся по теме всплывающих модальных окон.
Почему для меня эта тема так актуальна? Потому, что в последнее время очень часто заказчики хотят, чтобы на их сайтах выплывало окно с формой подписки, обратной связи или же с формой заказать звонок.
И я с большим удовольствием делюсь с вами, читатели блога BlogGood.ru, готовым решением, как сделать красивое, всплывающие модальное окно.

Кстати, в коде не используется JavaScript, jQuery, а только чистый HTML и CSS.

Итак, вставьте вот этот HTML-код перед </body>:

<!-- кнопка вызова popup -->
<a href="#login_form" id="login_pop">Открыть окно</a>
<!-- popup форма -->
<a href="#x" class="overlay" id="login_form"></a>
<div class="popup">
Здесь текст, форма и т.д.
    <a class="close" href="#close"></a>
</div>

Теперь CSS:

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

Посмотрите демонстрацию. Я применил всплывающее модальное окно для входа в админку сайта.

[смотреть демонстрацию]

Готовый код:

<html>
<head>
  <title>модальное окно</title>
  <meta charset="utf-8">
<style>
.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;
}
</style>
</head>
<body>
<!-- кнопка вызова popup -->
<a href="#login_form" id="login_pop">Войти</a>
<!-- popup форма -->
<a href="#x" class="overlay" id="login_form"></a>
<div class="popup">
<h2>Вход в АДМИН</h2>
Введите ваш логин и пароль
<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>
</body>
</html>

Вот и все! Пользуйтесь на здоровье :coffe: ! Мне не жалко!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

13 Ответов на комментарий - Всплывающее модальное окно для сайта

  1. Александр

    Как всегда всё написано понятно, спасибо за информацию !

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    И Вам, Александр, спасибо за то, что читаете мой блог!

    Ответить

  2. Елена

    Здравствуйте, Степан. Ваш блог для меня большая находка. Толковые объяснения человека знающего, при этом понятные даже новичку.

    Очень помогают ваши заготовки. Я стараюсь не просто копировать код, а разбираться, что к чему. Спасибо большое.

    Хочу спросить, раз вы уж так разошлись по модальным окнам. Как все таки сделать, чтобы присутствовало несколько кнопок, каждая была привязана к своему содержимому в окне, при этом вызов шел через одну функцию. В прошлый раз вы написали, что нужно каждому окну присваивать свой id и для каждого заново прописывать стили,но как тогда быть со скриптом, чтобы он мог вызывать не одно окно? И такое повторение стилей занимает много места. Неужели никак нельзя сократить и обобщить код. Сама я что-то пыталась сделать, полагаясь на логику и интуицию :grin: ведь знаний еще очень-очень мало. Естественно, ничего не получилось :?:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Елена. Спасибо, что Вы являетесь постоянным читателем. Вы правильно делаете, что стараетесь не просто скопировать код, а разобраться нем.
    Если вас интересует это всплывающее окно, можно сделать так:

    <!-- кнопка вызова popup1 -->
    <a href="#login_form" id="login_pop" rel="nofollow">Войти</a>
    <!-- popup форма -->
    <a href="#x" class="overlay" id="login_form" rel="nofollow"></a>
    <div class="popup">
    Текст №1
        <a class="close" href="#close" rel="nofollow"></a>
    </div>
    
    
    <!-- кнопка вызова popup2 -->
    <a href="#login_form2" id="login_pop" rel="nofollow">Войти</a>
    <!-- popup форма -->
    <a href="#x" class="overlay" id="login_form2" rel="nofollow"></a>
    <div class="popup">
    Текст №2
        <a class="close" href="#close" rel="nofollow"></a>
    </div>
    

    Меняете только “login_form”. Все CSS остаются такие же без изменения и дополнения.

    Ответить

    Елена отвечает:

    Спасибо вам за труд :rose: Еще меня интересовало другое модальное окно, но с ним я уже разобралась самостоятельно.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста, Елена!

    Ответить

  3. Родион

    Степан подскажите, а если я из формы захочу достать имя (логин) посетителя, который он сам ввел в этой форме:

    Логин

    Пароль

    Доставать через $_POST[‘id’] или как?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Родион, дайте код формы и я вам скажу точно.
    Дам достаточно переменную вывести, например:

    <p>Логин<br>
    <input name='name' type='text' size='40'>
    

    в php вот так:

    <? 
    if (isset($_POST['name'])) {$name = $_POST['name'];}
    echo $name; 
    ?>
    

    все будет работать.
    echo $name; – это вывод переменной. Другими словами, то что вводит пользователь в логин

    Ответить

  4. Родион

    Просто вы там вместо “name” – “id” поставили, меня
    ЭтО сбило с толку.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Родион, там все верно. Я вместо “name” не ставил “id”. Просто к этой форме нужно дописать “name” с именем к полю, чтобы обработчик PHP обработал форму.

    Ответить

  5. Дмитрий

    Скажите, Степан как сделать модальное окно (поплавок) слева внизу. Поплавок “сделавших заказ”. В поплавке город, имя заказчика и сумма заказа (она все время меняется), поплавок всплывает каждые 20 секунд?

    Ответить

    Дмитрий отвечает:

    Поплавок выглядит вот так https://yadi.sk/i/MHBaTOvq32uEi7

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Нужно в прописать в CSS
    float: left;

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 750
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4136