From 99aa155ea6325fa672ca9de3effb313895cf36dc Mon Sep 17 00:00:00 2001 From: Kyle Fox Date: Mon, 20 Sep 2010 13:08:33 -0600 Subject: [PATCH] Added events --- example.html | 46 ++++++++++++++++++++++++---------------------- jquery.modal.js | 14 ++++++++++++++ modal.css | 12 ++++++++++++ 3 files changed, 50 insertions(+), 22 deletions(-) create mode 100644 modal.css diff --git a/example.html b/example.html index 0950be9..45f92f9 100644 --- a/example.html +++ b/example.html @@ -2,8 +2,9 @@ - - + + + @@ -18,24 +19,7 @@ pre { font-size: 12px; line-height: 18px; } hr { height: 10px; background: #eee; border: none; } - jQuery Modal - + jQuery Modal @@ -43,8 +27,8 @@

jQuery Modal

the simplest modal you ever did see.

@@ -89,5 +73,23 @@

Demo: Open Modal

Thanks for clicking. That felt good.
Click close, click the overlay, or press ESC

+ + + \ No newline at end of file diff --git a/jquery.modal.js b/jquery.modal.js index b682661..f21d646 100644 --- 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,6 +64,14 @@ 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(); @@ -67,8 +79,10 @@ 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 new file mode 100644 index 0000000..f929917 --- /dev/null +++ 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; +} \ No newline at end of file