通过本文主要向大家介绍了JQUERY,dialog等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下。
准备 jQuery 环境
首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框。
<input type="button" value="删除" id="btn" />
为了设置这个按钮点击的事件,需要准备 jQuery 的环境。
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
在 ready 中设置按钮的点击事件。
准备对话框
第二步,需要准备对话框的内容。这些内容来自 jQuery UI 的演示文件。
<link type="text/css" href="styles/jquery.ui.all.css" rel="stylesheet" />
在 ready 函数中,同时也初始化这个对话框。
通过按钮弹出对话框
我们希望页面上初始化的时候看不到这个对话框,在点击按钮的时候再出现。那么需要这几个工作。
先给对话框增加一个默认不显示的样式。style="display: none",这样默认就不会看到这一部分。
在初始化对话框的时候,传递一个参数 autoOpen: false
实现模式对话框
在实际应用中,我们经常需要实现模式对话框,在 Web 中需要增加一个遮罩层来挡住底层的元素,模拟模式效果,这可以在初始化对话框的时候,传递一个参数 modal: true 来实现。修改之后的初始化代码成为: