Modalbox plugin
HTML
<button id="order"><span>Order 1</span></button>
<div id="nt_overlay"></div>
<div id="nt_modalbox">
<div id="nt_modalbox_content">
<h3>Form 1</h3>
<p>First version of Form</p>
<button id="sendForm"><span>Send</span></button>
</div>
</div>
<button id="order1"><span>Order 2</span></button>
<div id="nt_overlay1"></div>
<div id="nt_modalbox1">
<div id="nt_modalbox_content1">
<h3>Form 2</h3>
<p>Second version of Form</p>
<button id="sendForm1"><span>Send</span></button>
</div>
</div>
CSS
body {
width:100%;
height:100%;
margin:0;
}
#nt_overlay, #nt_overlay1 {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:998;
display:none;
}
#nt_overlay {
background:rgba(0,0,0,.5);
}
#nt_overlay1 {
background: rgba(156,217,107,.5);
}
#nt_modalbox, #nt_modalbox1 {
width:400px;
height:300px;
position:fixed;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-150px;
background:#fff;
z-index:999;
display:none;
}
JavaScript
//Page code. I prefer to add to <head>, but it's just a personal preference
$(function () {
$('#nt_modalbox').nt_modalbox({
opener: $('#order'),
closer: $('#sendForm'),
overlay: $('#nt_overlay'),
beforeClose: doBeforeClose,
afterClose: doAfterClose
});
$('#nt_modalbox1').nt_modalbox({
opener: $('#order1'),
closer: $('#sendForm1'),
overlay: $('#nt_overlay1'),
beforeClose: doBeforeClose,
afterClose: doAfterClose
});
});
//to test that beforeClose callback works
function doBeforeClose() {
console.log("before close", new Date().toUTCString(), this);
}
//to test that afterClose callback works
function doAfterClose() {
console.log("after close", new Date().toLocaleTimeString(), this);
}
//Our new jquery.modalbox.js code...
(function ($, document, window, undefined) {
'use strict';
$.fn.extend({
/*******************************************************************
* nt_modalbox
********************************************************************
* Usage:-
* selection.nt_modalbox(opts) [chainable]
*
* Where:-
* selection :: jQuery - the box wrapper
* opts :: object - parameter providing constructor options:-
* overlay :: jQuery - overlay
* opener :: jQuery - opener
* fadeDelay :: number - duration (in mS) of fades (optional)
* closer :: jQuery - closer (optional)
* beforeClose :: callback - executed before closing (optional)
* afterClose :: callback - executed after closing (optional)
* modalbox :: jQuery - box wrapper (internal use only)
*******************************************************************/
nt_modalbox: function (opts) {
var self = this; //closure copy of "this"
var opt = $.extend({ //per-instance copy of "opts"
...