[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Модальные окна
Марина_Шумелёва
Как сделать третье модальное окно? dry.gif аналогичное Demo01 или Demo02 ( без разницы )
вот тут пример

я уже и так и эдак rolleyes.gif никак не получается


waldicom
Выдрать из кода странички.

<script src="js/jquery.min.js"></script>
<
script src="js/animatedModal.min.js"></script>
<
script>

//demo 01
$("#demo01").animatedModal();

//demo 02
$("#demo02").animatedModal({
modalTarget:'modal-02',
animatedIn:'lightSpeedIn',
animatedOut:'bounceOutDown',
color:'#3498db',
// Callbacks
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>


не забыть про стили

_____________
Свои мозги еще никто не отменял.
Телепатов нету.
Марина_Шумелёва
что значит выдрать? без скриптов вообще ничего не работает rolleyes.gif
waldicom
Цитата (Марина_Шумелёва @ 19.07.2015 - 15:56)
что значит выдрать? без скриптов вообще ничего не работает  rolleyes.gif

Значит надо их скачать к себе или указать их абсолютный адрес на странице smile.gif

_____________
Свои мозги еще никто не отменял.
Телепатов нету.
Марина_Шумелёва
дык всё скачено давным давно, и пути к скриптам прописаны

третье модальное окно не получается сделать, по образцу первого или второго ))) tongue.gif
SerginhoLD
не отступать и не сдаваться

_____________
"internet explorer всех правильней отображает страницы" ©
waldicom
Цитата (Марина_Шумелёва @ 19.07.2015 - 16:08)
третье модальное окно не получается сделать, по образцу первого или второго ))) 

А как вы делаете? Ошибку кидает?

_____________
Свои мозги еще никто не отменял.
Телепатов нету.
Марина_Шумелёва
да я уже по всякому пробую...

добавляю ссылку на третье окно

<!--Call your modal-->
<ul>
<li><a id="demo01" href="#animatedModal">DEMO01</a></li>
<li><a id="demo02" href="#modal-02">DEMO02</a></li>
<li><a id="demo03" href="#modal-03">DEMO03</a></li>
</ul>

потом это
<!--DEMO03-->
<div id="modal-03">
<!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
<div id="btn-close-modal" class="close-modal-03">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>

и в скрипт



//demo 03
$("#demo03").animatedModal();
//demo 01
$("#demo01").animatedModal();
//demo 02
$("#demo02").animatedModal({
modalTarget:'modal-02',
animatedIn:'lightSpeedIn',
animatedOut:'bounceOutDown',
color:'#3498db',
// Callbacks
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");
}
}
);




Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.