Added events

kylefox · Sep 20, 2010 · 99aa155 · 99aa155
1 parent 5bc6c9f
commit 99aa155
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 22 deletions.
diff --git a/example.html b/example.html
@@ -2,8 +2,9 @@
 <html> 
 <head> 
  <script src="http:https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
- <!-- // <script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script> -->
- <script src="jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>
+
+ <script src="jquery.modal.js" type="text/javascript" charset="utf-8"></script>
+ <link rel="stylesheet" href="modal.css" type="text/css" media="screen" />
 
  <script src="highlight/highlight.pack.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8"> hljs.initHighlightingOnLoad(); </script>
@@ -18,33 +19,16 @@
  pre { font-size: 12px; line-height: 18px; }
  hr { height: 10px; background: #eee; border: none; }
  </style>
- <title>jQuery Modal</title> 
- <style type="text/css" media="screen">
-
-/* pre { background: #f4f4f4; padding: 10px;}*/
-
- .modal {
- display: none;
- width: 400px;
- background: #fff;
- padding: 15px 30px;
- -webkit-border-radius: 12px;
- -moz-border-radius: 12px;
- border-radius: 12px;
- -webkit-box-shadow: 0 0 10px #000;
- -moz-box-shadow: 0 0 10px #000;
- box-shadow: 0 0 10px #000;
- }
- </style>
+ <title>jQuery Modal</title>
 </head> 
 <body>
 
 <h1>jQuery Modal</h1>
 <p><em>the simplest modal you ever did see.</em></p>
 <ul>
  <li>Automatic binding using HTML semantics</li>
- <li>No images</li>
- <li>Light weight <small>(about 1k minified)</small></li>
+ <li>No images &amp; light-weight <small>(about 1k minified)</small></li>
+ <li>Attach custom behaviour using <a href="http:https://api.jquery.com/category/events/">jQuery events</a></li>
  <li>Close with click or ESC key</li>
  <li>Works in every single browser known to man (including Lynx)</li>
 </ul>
@@ -89,5 +73,23 @@ <h3>Demo: <a href="#ex1" rel="open-modal">Open Modal</a></h3>
  <p>Thanks for clicking. That felt good. <br />Click <a href="#" rel="close-modal">close</a>, click the overlay, or press ESC</p>
 </div>
 
+
+
+<script type="text/javascript" charset="utf-8">
+ $(function() {
+
+ function log_modal_event(event, modal) {
+ if(console && console.log) console.log("[event] " + event.type);
+ };
+
+ $(document).bind($.fn.modal.BEFORE_BLOCK, log_modal_event);
+ $(document).bind($.fn.modal.BLOCK, log_modal_event);
+ $(document).bind($.fn.modal.BEFORE_OPEN, log_modal_event);
+ $(document).bind($.fn.modal.OPEN, log_modal_event);
+ $(document).bind($.fn.modal.BEFORE_CLOSE, log_modal_event);
+ $(document).bind($.fn.modal.CLOSE, log_modal_event);
+
+ });
+</script>
 </body> 
 </html>
diff --git a/jquery.modal.js b/jquery.modal.js
@@ -32,6 +32,7 @@
  current_modal.blocker.click($.fn.modal.close);
  }
  $('body').append(current_modal.blocker);
+ $(document).trigger($.fn.modal.BLOCK, [current_modal]);
  }
 
  function show() {
@@ -44,10 +45,13 @@
  zIndex: options.zIndex + 1
  });
  $elm.addClass(options.modalClass).addClass('current').show();
+ $(document).trigger($.fn.modal.OPEN, [current_modal]);
  }
 
  current_modal = {elm: $elm};
+ $(document).trigger($.fn.modal.BEFORE_BLOCK, [current_modal]);
  block();
+ $(document).trigger($.fn.modal.BEFORE_OPEN, [current_modal]);
  show();
  };
 
@@ -60,15 +64,25 @@
  modalClass: "modal"
  };
 
+ // Event constants:
+ $.fn.modal.BEFORE_BLOCK = 'modal:before-block';
+ $.fn.modal.BLOCK = 'modal:block';
+ $.fn.modal.BEFORE_OPEN = 'modal:before-open';
+ $.fn.modal.OPEN = 'modal:open';
+ $.fn.modal.BEFORE_CLOSE = 'modal:before-close';
+ $.fn.modal.CLOSE = 'modal:close';
+
  $.fn.modal.close = function(event) {
  if(event) {
  event.preventDefault();
  }
  if(!current_modal) {
  return;
  }
+ $(document).trigger($.fn.modal.BEFORE_CLOSE, [current_modal]);
  current_modal.blocker.remove();
  current_modal.elm.hide();
+ $(document).trigger($.fn.modal.CLOSE, [null]);
  };
 
  function open_modal_from_link(event) {

diff --git a/modal.css b/modal.css
@@ -0,0 +1,12 @@
+.modal {
+ display: none;
+ width: 400px;
+ background: #fff;
+ padding: 15px 30px;
+ -webkit-border-radius: 8px;
+ -moz-border-radius: 8px;
+ border-radius: 8px;
+ -webkit-box-shadow: 0 0 10px #000;
+ -moz-box-shadow: 0 0 10px #000;
+ box-shadow: 0 0 10px #000;
+}