BloGGood.ru

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

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

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

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

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

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

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

Всем привет!
Ох, и не на шутку я разошелся по теме всплывающих модальных окон.
Почему для меня эта тема так актуальна? Потому, что в последнее время очень часто заказчики хотят, чтобы на их сайтах выплывало окно с формой подписки, обратной связи или же с формой заказать звонок.
И я с большим удовольствием делюсь с вами, читатели блога 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[ENGINE="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: ведь знаний еще очень-очень мало. Естественно, ничего не получилось :?:

  3. Родион

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

    Логин

    Пароль

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

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

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

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

    в php вот так:

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

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

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

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

  6. Родион

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

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

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

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

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

    <!-- кнопка вызова 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 остаются такие же без изменения и дополнения.

  9. Елена

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

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

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

  11. Дмитрий

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

  12. Дмитрий

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

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

    Нужно в прописать в 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]

Метки: , , ,

Мои цели на 2018-2019:

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

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

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

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

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

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

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

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573