JQuery UI 弹出窗口（Dialog）

来源：互联网发布：关公纹身贴淘宝编辑：程序博客网时间：2024/05/01 14:53

JQuery UI 弹出窗口（Dialog）

从官方网站下载最新的 http://jqueryui.com/download 的Jquery-ui build.

解压文件到，比如 D:\jquery-ui-1.8.21.custom\

在D:\ 建个目录如 D:\my_web_app

在该目录下建个html文件， test.html

test.html 内容如下：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jQuery UI Button Demos</title><link rel="stylesheet" href="../jquery-ui-1.8.21.custom/development-bundle/themes/base/jquery.ui.all.css"><script src="../jquery-ui-1.8.21.custom/development-bundle/jquery-1.7.2.js"></script><script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.core.js"></script><script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.widget.js"></script><script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.mouse.js"></script><script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.draggable.js"></script><script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.position.js"></script><script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.resizable.js"></script><script src="../jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.dialog.js"></script><link rel="stylesheet" href="../jquery-ui-1.8.21.custom/development-bundle/demos/demos.css"><script>$(function() {$( "#dialog" ).dialog();});</script></head><body><div id="dialog" title="Basic dialog"><p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p></div></body></html>

下面是运行之后的效果图：