Advertisement
Guest User

Untitled

a guest
Feb 9th, 2016
51
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.12 KB | None | 0 0
  1. <div data-dialog="somedialog" class="trigger" >1</div><br>
  2. <div data-dialog="somedialog" class="trigger" >2</div><br>
  3. <div data-dialog="somedialog" class="trigger" >3</div><br>
  4. <div data-dialog="somedialog" class="trigger" >4</div><br>
  5. <div data-dialog="somedialog" class="trigger" >5</div><br>
  6.  
  7. <div id="somedialog" class="dialog">
  8. <div class="dialog__overlay"></div>
  9. <div class="dialog__content">
  10. Диалоговое окно<div><button class="action" data-dialog-close>Close</button></div>
  11. </div>
  12. </div>
  13.  
  14. window.dlgtrigger = document.querySelector('[data-dialog]'),
  15. window.somedialog = document.getElementById(window.dlgtrigger.getAttribute('data-dialog')),
  16. window.dlg = new DialogFx(window.somedialog);
  17.  
  18. window.dlgtrigger.addEventListener('click', window.dlg.toggle.bind(window.dlg));
  19.  
  20. $(".trigger").click(function() {
  21.  
  22. dlg.toggle.bind(dlg)();
  23.  
  24.  
  25. });
  26.  
  27. window.dlgtrigger.addEventListener('click', window.dlg.toggle.bind(window.dlg));
  28.  
  29. $(".trigger").click(function() {
  30. dlg.toggle.bind(dlg)();
  31. });
  32.  
  33. <div data-dialog="somedialog" class="trigger" >1</div><br>
  34. <div data-dialog="somedialog" class="trigger" >2</div><br>
  35. <div data-dialog="somedialog" class="trigger" >3</div><br>
  36. <div data-dialog="somedialog" class="trigger" >4</div><br>
  37. <div data-dialog="somedialog" class="trigger" >5</div><br>
  38. <div id="somedialog" class="dialog">
  39. <div class="dialog__overlay"></div>
  40. <div class="dialog__content">
  41. <p>Диалоговое окно</p>
  42. <div>
  43. <button type="button" class="dialog-close-btn action" data-dialog-close>Close</button>
  44. </div>
  45. </div>
  46. </div>
  47.  
  48.  
  49. (function(){
  50. var $dialogTemplate;
  51.  
  52. $(function(){
  53. $dialogTemplate = $('.dialog').detach();
  54. });
  55.  
  56. var showDialog = function() {
  57. var $dialog = $dialogTemplate.clone();
  58. $(document.body).append($dialog);
  59. };
  60.  
  61. var removeDialog = function() {
  62. $('.dialog').remove();
  63. };
  64.  
  65. $(document).on('click', '.trigger', showDialog);
  66. $(document).on('click', '.dialog-close-btn', removeDialog);
  67. })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement