Эластичное модальное окно с возможностью перетаскивания
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<link rel="stylesheet" type="text/css" href="/css/dialog.css" /> <script type='text/javascript' src="/js/dynamics.min.js"></script> <script type='text/javascript' src="/js/draggabilly.pkgd.min.js"></script> <script type='text/javascript' src="/js/main.js"></script> <script> (function() { var dialog = new DialogEl(document.getElementById('dialog-1'), { mainElement: { minscale: 0.6, minopacity: 0.5, //rX : 30, rY: 40 }, innerElements: { tx: 100, ty: 100 }, // the element is considered out of bounds if its center (x,y) is either // x < outofbounds.x or x > win.width-outofbounds.x or // y < outofbounds.y or y > win.height - outofbounds.y outofbounds: { x: 0, y: 0 } }); document.getElementById('trigger-dialog').addEventListener('click', function(ev) { dialog.open(); }); })(); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div class="content"> <button id="trigger-dialog" class="button button--dialog">Открыть окно</button> </div> <div class="dialog" id="dialog-1"> <div class="mover-wrap dialog__content"> <div class="handle"></div> <div class="mover"> <div class="dialog__content-inner"> <div class="dialog__header"> <h2>Заголовок окна</h2> <button class="action action--close"> <i class="icon icon--cross"></i> x </button> </div> <div class="dialog__body"> <div class="actions"> <div class="mover__element"> <a href="#" class="action action--fav"> <span class="action__title">IMAPO.RU</span> <span class="action__subline">Только лучшие скрипты</span> </a> </div> <div class="mover__element"> <a href="#" class="action action--download"> <span class="action__title">Заголовок</span> <span class="action__subline">Описание заголовка</span> </a> </div> <div class="mover__element"> <a href="#" class="action action--share"> <span class="action__title">Заголовок 2</span> <span class="action__subline">Описание заголовка 2</span> </a> </div> </div> </div> <div class="dialog__footer"> <a href="#">Я - ссылка</a> </div> </div> </div> </div> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
