JQuery UI库 - Dialog
在网站中我们经常会做一些好看的Popup Dialog,我们前面曾经讲过用JQuery的Importo插件
来做自定义的AlertBox。
其实，我们可以利用JQuery官方提供的UI库来做。
而且，JQuery UI库效果更好，更成熟。
今天，我们就来讲一下怎么利用JQuery UI自身的UI库来做自定义的Dialog。
首先，我们需要下载到JQuery UI自身的javascript和css还有图片文件夹，把它们
放在特定的位置，我们好引用。
jquery-ui-1.7.2.custom.min.js
jquery-ui-1.7.2.custom.css
完整代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryUIdialog.aspx.cs" Inherits="BlogNet.JQueryDemo.JqueryUIdialog" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>JQuery Dialog</title>
<script type='text/javascript' src='../JsLib/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../JsLib/jquery-ui-1.7.2.custom.min.js'></script>
<link rel='stylesheet' type='text/css' href='../CSS/jquery-ui-1.7.2.custom.css' />
<link rel='StyleSheet' href='../CSS/style.css' type='text/css' />
<script type='text/javascript'>
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$('#myDialog').dialog({
width: 700,
autoOpen: false,
modal: true,
buttons: {
}
});
});
function showDialog() {
$('#myDialog').dialog('open');
}
function closeWin() {
$('#myDialog').dialog('close');
}
</script>
</head>
<body>
<!-- Jquery UI popup dialog content -->
<div title="My Dialog">
<div >
<span class="blue13">Here is your message for dialog</span>
</div>
<div >
<img src="../Images/Button_Close.gif" onMouseover="this.style.cursor='hand'" onclick="closeWin();">
</div>
</div>
<form runat="server">
<div>
<input type="button" name="btnDialog" value="My Dialog" onclick="javascript:showDialog();" />
</div>
</form>
</body>
</html>
在上面代码中，<div >