Данный код ставим вверх своего сайта
Код
<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>
Смотреть Демо