| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
10年前发布

jQuery Modal对话框插件:dialog.js

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.

项目主页:http://www.open-open.com/lib/view/home/1411354064906

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1411354064906.html
dialog.js jQuery对话框插件 jQuery插件