jQuery Modal对话框插件：dialog.js
jopen
10年前
dialog.js 是一个jQuery对话框插件，能够让你创建漂亮和简洁的警告框，确认框，联系/登录表单。
基本用法:
1. Include the latest version of jQuery library from a CDN.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
2. Include the jQuery dialog.js plugin's script and stylesheet after jQuery library.
<link rel="stylesheet" href="dialog.css"> <script src="dialog.js"></script>
3. Create a button to trigger an alert box on your web page.
<button id="alert-demo">Alert</button>
4. When document ready add click behavior to the trigger button and set the custom messages for the alert box.
$(document).ready(function () { $("#alert-demo").click(function (event) { event.stopPropagation(); $.dialog.alert("Hello World"); }); }); 5. Syntaxs.
$.dialog.open(name) $.dialog.close(name) $.dialog.alert(msg) $.dialog.confirm(msg[,options])
6. Confirm options.
- ok: "Text of OK button"
- cancel: "Text of Cancel button"
- option: "Text of optional button" - goes to the left of the Cancel buttonThe text of the button is returned in the onClose method if clicked.
7. Syntaxs.
.onOpen(function(element){}) .onClose(function(element){}) .onClose(function(boolean or text of optional button){}) // confirm only. .autoClose(msecs) 7. Custom template settings.
path: "": Path to dialog template files.extension: ".html": Extension of template file. This is added after the name of the dialog.replace: true: If true replace the contents of the dialog each time it is displayed. If false, retain the contents of the dialog.blocker: '<div class="blocker fade"></div>': Template of blocker element that contains the dialog.