`
piperzero
  • 浏览: 3456891 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

JQuery实现弹出框

 
阅读更多

今天阅读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>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics