今天阅读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>
分享到:
相关推荐
基于jQuery实现弹出框选择生日特效源码.zip
Jquery实现模态框,包含对表的修改,删除,详情查看,增加等功能,代码简介,通俗易懂,对该代码原主人表示感谢!
artDialog
jQuery 实现弹出消息窗口,相当的绚丽
jquery实现注册时弹出框效果,背景效果不错,很实用
jquery实现弹出登陆框效果,供大家一起共同分享学习。
NULL 博文链接:https://littleshy.iteye.com/blog/1742230
弹出框,有遮罩层,遮罩随滚动条满覆盖,弹出框随滚动条调整位置。兼容主流浏览器
使用Jquery实现 页面有新消息即时弹出框提醒,包括分层列表、表单验证、带拖动测层、等...
利用jquery实现弹层,弹出一个登陆框方便用户登陆使用
实现效果: ...大气绿色jQuery弹出框弹出层特效代码,支持三种弹出对话框模式,即提示信息、confirm确认、 alert提示三种弹框模式,特效代码基于jQuery实现,很不错的对话框,相比ArtDialog功能弱了点。效。
jquery实现多风格消息弹出框插件jGrowl下载
jquery.alerts 弹出框,可以自己自定义样式,通过jAlert、jConfirm、jPrompt就能实现原先js的弹出框,简单方便
主要为大家详细介绍了jQuery页面弹出框实现文件上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
实现弹出网页遮罩层,可兼容IE6/IE7/IE+++等; 缩放浏览器时,内容狂始终居中; 有点小bug,在IE6下,遮罩层颜色没透明,屎黑色,等我有空完善下。
里面有三个Jquery实现的弹出层,效果非常好,如果你需要在项目中使用弹出登陆,注册这样的层,这个例子是个不错的选择。
jQuery CSS3 弹出框插件,带阴影效果,自带有10多种用法的演示代码,比如错误框、提示框、文字显示框等,点击示例页下面的按钮,即可弹出对应的提示框效果,测试请使用Chrome、火狐、Opera浏览器,IE11下也表现良好...
大气绿色jQuery弹出框弹出层特效代码,支持三种弹出对话框模式,即提示信息、confirm确认、 alert提示三种弹框模式,特效代码基于jQuery实现,很不错的对话框,相比ArtDialog功能弱了点。
实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok')...