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.
- Automatic binding using HTML semantics
- - No images
- - Light weight (about 1k minified)
+ - No images & light-weight (about 1k minified)
+ - Attach custom behaviour using jQuery events
- Close with click or ESC key
- Works in every single browser known to man (including Lynx)
@@ -89,5 +73,23 @@
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