• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Модальное окно на весь экран браузера
Модальное окно на весь экран браузера
workman
Вторник, 05 Января 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9


Данный код ставим вверх своего сайта
Код

<link rel="stylesheet" href="http://www.brigada31.ru/DEMO/animatedModal/animate.min.css">
<script src="http://www.brigada31.ru/DEMO/animatedModal/skript_okon.js"></script>
<div id="animatedModal">
         <div  id="btn-close-modal" class="close-animatedModal">- Закрыть окно -</div>
                
            <div class="modal-content">
              Тут может быть любая ваша информация, вплоть до установки формы регистрации, или форма входа<br>Ну если конечно отнестись к данному коду с умом
            </div>
        </div>

        <div id="modal-02">
            <div  id="btn-close-modal" class="close-modal-02"> - Закрыть окно - </div>
            
            <div class="modal-content">
            Тут может быть любая ваша информация, вплоть до установки формы регистрации, или форма входа<br>Ну если конечно отнестись к данному коду с умом
            </div>
        </div>
<script>
            $("#demo01").animatedModal();
            $("#demo02").animatedModal({
                modalTarget:'modal-02',
                animatedIn:'lightSpeedIn',
                animatedOut:'bounceOutDown',
                
                beforeOpen: function() {
                    console.log("The animation was called");
                },           
                afterOpen: function() {
                    console.log("The animation is completed");
                },
                beforeClose: function() {
                    console.log("The animation was called");
                },
                afterClose: function() {
                    console.log("The animation is completed");
                }
            });

        </script>

А любую из ссылок ставим по месту
Код
<a id="demo01" href="#animatedModal">Открыть окно №1</a>
<a id="demo02" href="#modal-02">Открыть окно №2</a>

Смотреть Демо
Прикрепления: 3126216.png (12.1 Kb)


Сообщение отредактировал
workman - Вторник, 05 Января 2016, 16:09
Страна: (RU)
FeStemBer
Четверг, 07 Января 2016 | Сообщение 2
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Так то по идее если мини чат workman поставил, то можно что вам нужно вывести.
Страна: (RU)
Траст
Понедельник, 29 Февраля 2016 | Сообщение 3
Оффлайн
Пользователи
Сообщений:101
Награды: 0
Так много уже встречаю на чайтах разные модальные окна. Видать тренд на них пошел.

Быстро, дешево и сердито!
Страна: (RU)
Kosten
Понедельник, 29 Февраля 2016 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Но здесь на сайте стоит одно такое.
Страна: (RU)
Scheme
Понедельник, 29 Февраля 2016 | Сообщение 5
Оффлайн
Пользователи
Сообщений:157
Награды: 1
Цитата Kosten ()
Но здесь на сайте стоит одно такое.

Что то не заметил, одно окно стандартное.
Страна: (RU)
Kosten
Понедельник, 29 Февраля 2016 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
kvyntin, как то писал, чтоб просто зашли как гость на сайт и попробовали скачать и появиться такое окно.

Прикрепления: 4041546.png (374.7 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Модальное окно на весь экран браузера
  • Страница 1 из 1
  • 1
Поиск: