今天閱讀jquery手冊，看到Dialog對話框控件，感覺這個可以運用到以後的登陸頁面，所以就按照書上的寫法，寫了一個，以便以後使用，本內容引用的是jquery-1.5.1，css樣式這裏就不在發佈
<!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>
<title>jQuery UI - 彈出層應用實例 Dialog</title>
<link href="./css/redmond/style.css" rel="stylesheet"
type="text/css" />
<script src="./js/jquery-1.5.1.min.js"
type="text/javascript"></script>
<script src="./js/jquery-ui-1.8.2.custom.min.js"
type="text/javascript"></script>
<script type="text/javascript">
Function.prototype.proxy = function (context) {
return jQuery.proxy(this, context);
};
</script>
<style type="text/css">
body
{
font-size:12px;
}
</style>
</head>
<body>
<!-- Demo 遮罩類彈出層 -->
<div class="ui-widget ui-widget-content ui-corner-all"
style="width: 700px; padding: 5px;">
<h3>Demo. 彈出IFrame </h3>
<div>
<input type="button" id="btnShowIframe"
name="btnShowIframe" value="顯示彈出層"/>
</div>
</div>
<!-- 提示類彈出層 -->
<div id="divTip" title="自定義標題" >
<p>彈出層</p>
</div>
<!-- 遮罩類彈出層 -->
<div id="divIframe" title="iFrame彈出層" style="text-
align:center;">
<iframe src="www.baidu.com"
width="480px" height="250px"
frameborder="0"></iframe>
</div>
<script type="text/javascript">
var thisPage = {
initialize: function () {//加載時執行
this.initializeDom();
this.initializeEvent();
this.$spanShowTip.css("cursor", "pointer");
this.$spanShowDataTip.css("cursor", "pointer");
//初始化提示類彈出層
this.$divTip.dialog({
show: 'slide',
bgiframe: false,
autoOpen: false
});
//初始化遮罩類彈出層
this.$divIframe.dialog({
show: null,
bgiframe: false,
autoOpen: false,
draggable: true,
resizable: false,
modal: true,
width: 500,
height: 300
});
},
initializeDom: function () {//初始化DOM
this.$spanShowTip = $("span[id^=spanShowTip]");
this.$spanShowDataTip = $("span
[id^=spanShowDataTip]");
this.$btnShowIframe = $("#btnShowIframe");
this.$divTip = $("#divTip");
this.$divIframe = $("#divIframe");
},
initializeEvent: function () {//事件綁定
//靜態提示類彈出層
this.$spanShowTip.click(function (event) {
$("*").stop(false, true);
event.stopPropagation();
this.$divTip.dialog("close");
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
var top = $(event.target).offset().top +
$(event.target).height() - scrollTop + 6;
var left = $(event.target).offset().left -
scrollLeft;
this.$divTip.dialog("option", "position",
[left, top]);
this.$divTip.dialog("open");
} .proxy(this));
//動態提出類彈出層
this.$spanShowDataTip.click(function (event) {
$("*").stop(false, true);
this.$divTip.dialog("close");
event.stopPropagation();
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
var top = $(event.target).offset().top +
$(event.target).height() - scrollTop + 6;
var left = $(event.target).offset().left -
scrollLeft;
this.$divTip.html($(event.target).attr
("data"));
this.$divTip.dialog("option", "position",
[left, top]);
this.$divTip.dialog("open");
}.proxy(this));
//遮罩類彈出層
this.$btnShowIframe.click(function (event) {
event.preventDefault();
event.stopPropagation();
this.$divIframe.dialog("open");
}.proxy(this));
//單擊自身取消冒泡
this.$divTip.bind("click", function (event) {
event.stopPropagation();
});
this.$divIframe.bind("click", function (event) {
event.stopPropagation();
});
//document對象單擊隱藏所有彈出層
$(document).bind("click", function (event) {
this.$divTip.dialog("close");
this.$divIframe.dialog("close");
}.proxy(this));
}
}
$(thisPage.initialize());
</script>
</body>
</html>