jquery-dialog.js
Tiny modal window library.
Usage
<button data-dialog="#my-dialog">Open Dialog</button> <div style="display: none;"> <div id="my-dialog"> <h1>Dialog</h1> <p>Dialog content</p> <button data-dialog-close>Close</button> </div> </div>
With Options:
<button data-dialog="#my-dialog" data-dialog-clone data-dialog-top="100">Open Dialog</button>
- data-dialog-clone (no value) ... Open dialog with cloned content
- data-dialog-top :Number|String ... Specify top position. Centered if "auto".
- data-dialog-width :Number ... Specify the width of dialog
Open dynamically
$("#button-dialog").on("click", function(){ $("<div>") .append('\ <h1>Dialog</h1>\ <p>Dialog content</p>\ <button data-dialog-close>Close</button>\ ') .children() .dialog({ width: 640 }); });
$.fn.dialog([options]) :jQuery
options:
- top :Number|String ... Specify top position
- width ... Specify the width of dialog
Configure default options
$.dialog.config({ zIndex: 99, className: "dialog", containerClassName: "dialog-container", width: "60%", clone: false, duration: 300, backgroundColor: "rgba(0, 0, 0, .9)", top: "auto" })
- zIndex :Number ... z-index of container
- className :String ... className of dialog
- containerClassName :String ... className of container
- width :Number|String ... width fo dialog
- clone :Boolean ... Clone the content or not
- duration :Number ... Duration millisecond time for fade-in animation
- backgroundColor :String ... background-color of container
- top :String|Number ... Top position of dialog
Events
$.dialog
fires some events.
$.dialog.on("dialogclose", function(){ console.log("dialog closed"); });
- dialogclose ... Dialog is closed
- dialogopen ... Dialog is opened
Transparent background for legacy (MSIE8 or less)
This example show you the one way to let container's background be transparent for legacy environment which cannot render with "rgba()".
.dialog-container { background-image: url(background.png); }
$.dialog.config({ backgroundColor: "transparent" });