Скрипт всплывающего анимационного модального окна для сайта. Чтобы открыть окно, кликните по одной из кнопок ниже.
Click Me1 Click Me2
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script src="http://kachay.ucoz.org/js/modal/Sweefty.js" type="text/javascript"></script> <script src="http://kachay.ucoz.org/js/modal/moaModal.js"></script> <style type="text/css"> .modal{display:none; width:30%;height:60%; top:50%;height:50%; background:#eee; border-radius:6px; box-shadow: 0px 0px 10px 1px #333; padding:30px; } .hideModal{ position:relative; bottom:5px;right:5px; float:right; } </style> </head> <body> <!-- triggering element --> <button class="viewModal1">ClickMe1</button> <button class="viewModal2">ClickMe2</button> <p>Скрипт всплывающего анимационного модального окна</p> <script type="text/javascript"> $(function(){ $('.viewModal1').modal({ target : '#modal1', animation : 'left', //zoom easing : 'easeInOutElastic', //easeOutCirc,easeInOutExpo,easeOutSine,easeOutBack,easeInOutElastic,easeInOutBounce escapeClose : false }); $('.viewModal2').modal({ target : '#modal2', animation : 'top', overlayClose : false, overlayColor: '#400', overlayOpacity : 0.8 }); }); function close1(x){ document.getElementById(x).style.display='none'; document.getElementById('d1').style.display='none'; document.getElementById('d2').style.display='none'; } </script> <!-- modal element --> <div id="modal1" class="modal" onclick="close1('modal1');"> <img src="http://cs406530.vk.me/v406530707/8c04/U7lM-ZKTT1U.jpg" alt="" width="100" style="float:left;margin-right:15px;" /> <b>Скрипт всплывающего анимационного модального окна</b> <hr /> Экспедиция на берега реки Бердь<hr /> <p align="right"><button id="close1">Close</button> </div> <div id="modal2" class="modal">Текст здесь <button onclick="close1('modal2')">Close</button> </div> ...
Close
Играйте бесплатно в TommyRock 
Скрипт всплывающего анимационного модального окна 
