Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div data-dialog="somedialog" class="trigger" >1</div><br>
- <div data-dialog="somedialog" class="trigger" >2</div><br>
- <div data-dialog="somedialog" class="trigger" >3</div><br>
- <div data-dialog="somedialog" class="trigger" >4</div><br>
- <div data-dialog="somedialog" class="trigger" >5</div><br>
- <div id="somedialog" class="dialog">
- <div class="dialog__overlay"></div>
- <div class="dialog__content">
- Диалоговое окно<div><button class="action" data-dialog-close>Close</button></div>
- </div>
- </div>
- window.dlgtrigger = document.querySelector('[data-dialog]'),
- window.somedialog = document.getElementById(window.dlgtrigger.getAttribute('data-dialog')),
- window.dlg = new DialogFx(window.somedialog);
- window.dlgtrigger.addEventListener('click', window.dlg.toggle.bind(window.dlg));
- $(".trigger").click(function() {
- dlg.toggle.bind(dlg)();
- });
- window.dlgtrigger.addEventListener('click', window.dlg.toggle.bind(window.dlg));
- $(".trigger").click(function() {
- dlg.toggle.bind(dlg)();
- });
- <div data-dialog="somedialog" class="trigger" >1</div><br>
- <div data-dialog="somedialog" class="trigger" >2</div><br>
- <div data-dialog="somedialog" class="trigger" >3</div><br>
- <div data-dialog="somedialog" class="trigger" >4</div><br>
- <div data-dialog="somedialog" class="trigger" >5</div><br>
- <div id="somedialog" class="dialog">
- <div class="dialog__overlay"></div>
- <div class="dialog__content">
- <p>Диалоговое окно</p>
- <div>
- <button type="button" class="dialog-close-btn action" data-dialog-close>Close</button>
- </div>
- </div>
- </div>
- (function(){
- var $dialogTemplate;
- $(function(){
- $dialogTemplate = $('.dialog').detach();
- });
- var showDialog = function() {
- var $dialog = $dialogTemplate.clone();
- $(document.body).append($dialog);
- };
- var removeDialog = function() {
- $('.dialog').remove();
- };
- $(document).on('click', '.trigger', showDialog);
- $(document).on('click', '.dialog-close-btn', removeDialog);
- })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement