js弹窗,需用到jQuery,不足之处,希望指正。
/*
* url 弹窗中要加载的url地址
* params url请求的参数
* title 弹窗标题
* width 弹窗宽度 Default:800px
* height 弹窗高度 Default:450px
* 页面引用举例(前置条件:JQuery):
* function showWindow(){
* var popUpWindow = new PopUpWindow(url,{"param1":"param1Value",
* "param2":"param2Value"},"标题");
* popUpWindow.show();
* }
*
* */
function PopUpWindow(url, params, title, width, height) {
width = width || 800;
height = height || 450;
// 遮罩层div
this.coverDiv = $("<div style='position: absolute;display:none;"
+ "background-color: black; filter: alpha(opacity = 20);"
+ "width: 100%; height:100%;top: 0px; left: 0px'></div>");
// 内容透明边框div层
this.borderDiv = $("<div style='position: absolute;display:none;"
+ "left: 100px; top: 20px; background-color: black;"
+ "filter: alpha(opacity = 40);width:" + (width + 20)
+ "px;height:" + (height + 20) + "px'></div>");
// 弹窗显示内容层div
this.contentDiv = $("<div style='position: absolute;display:none;"
+ " left: 100px; top: 20px; background-color: white; padding-top: 0px; "
+ "padding-right: 0px; padding-left: 0px;width:" + width
+ "px;height:" + height + "px'></div>");
// 加载图片层div
this.loadDiv = $("<div style='position: absolute;display:none;"
+ "left: 100px; top: 20px; padding-top: 0px;padding-right: 0px; "
+ "padding-left: 0px;'><img src='../include/images/loading.gif'>"
+"</img></div>");
// 标题层div
this.titleDiv = $("<div class='title' style='padding-top: 0px;"
+ "padding-right: 0px;padding-left: 0px;float:left;'>"
+" "+ title + "</div>");
// 内容层div
this.contentBody = $("<div style='position: absolute; border: 2px solid #e1f4eb;"
+ "width: 98.5%; height: 85%; left: 0px; top: 40px; overflow: auto;'></div>")
// 关闭按钮层
this.closeBtnDiv = $("<div style='padding-top: 7px;padding-right: 100px;"
+"float:right;'></div>");
// 关闭按钮
this.closeBtn = $("<input type='button' value=' 关 闭 ' class='c_botton'/>");
// 保持本身引用句柄
meHandler = this;
// 关闭弹窗
PopUpWindow.prototype.hide = function() {
$("body").css( {
overflow : "auto"
});
meHandler.coverDiv.empty();
meHandler.coverDiv.remove();
meHandler.contentDiv.empty();
meHandler.contentDiv.remove();
meHandler.borderDiv.remove();
meHandler = null;
}
// 显示弹窗
PopUpWindow.prototype.show = function() {
this.coverDiv.css("height", $(document).height());
$("body").css("overflow", "hidden");
this.putDivOnScreenCenter(this.loadDiv);
this.coverDiv.css({display : ""});
this.loadDiv.css({display : ""});
this.contentBody.load(url, params, this.callBack);
}
// 回调函数
PopUpWindow.prototype.callBack = function(textStatus) {
meHandler.loadDiv.remove();
if (textStatus == "") {
alert("对不起,网络连接错误。");
meHandler.hide();
} else {
meHandler.putDivOnScreenCenter(meHandler.contentDiv);
meHandler.putDivOnScreenCenter(meHandler.borderDiv);
meHandler.contentDiv.css({display : ""});
meHandler.borderDiv.css({display : ""});
}
}
// 重新加载
PopUpWindow.prototype.reLoad = function(url, params) {
this.contentBody.load(url, params);
}
// 设置弹窗位置,居中
PopUpWindow.prototype.putDivOnScreenCenter = function(targetDiv) {
var wx = $(window).width() / 2;
var wy = $(window).height() / 2;
var wTargetDiv = targetDiv.width() / 2;
var hTargetDiv = targetDiv.height() / 2;
var stop = $("body").scrollTop();
var sleft = $("body").scrollLeft();
targetDiv.css({left : wx - wTargetDiv + sleft + "px",
top : wy - hTargetDiv + stop + "px"});
}
// 给关闭弹窗按钮添加关闭方法
this.closeBtn.click(this.hide);
// 把关闭按钮添加到关闭按钮层
this.closeBtnDiv.append(this.closeBtn);
// 把标题层添加到弹窗层中
this.contentDiv.append(this.titleDiv);
// 把关闭按钮层添加到弹窗层中
this.contentDiv.append(this.closeBtnDiv);
// 包内容层添加到弹窗层中
this.contentDiv.append(this.contentBody);
// 依次把各层添加到body中
$("body").append(this.coverDiv);
$("body").append(this.borderDiv);
$("body").append(this.contentDiv);
$("body").append(this.loadDiv);
}
- 大小: 3.2 KB
- 大小: 12.7 KB
分享到:
相关推荐
JAVASCRIPT弹出窗口代码JAVASCRIPT弹出窗口代码JAVASCRIPT弹出窗口代码
制作Javascript弹出窗口技巧九则,需要注意的是,JS脚本中的的大小写最好前后保持一致。
详细介绍javascript弹出窗口的设计方法,各个键值的含义,注意事项等。
JAVASCRIPT 所有关于弹出窗口的代码 开发过程中直接可以用 经过长时间的积累形成的,供大家分享!
推荐一个非常好用的javascript弹出窗口控件
javascript弹出窗口lhgdialog 非常好用
javascript弹出窗口问题总结 1.无提示刷新网页 2.javascript刷新页面的方法 3.javascript弹出窗口代码 4.模式窗口数据不刷新(缓存)问题 5.模式窗口中,链接弹出新窗口问题 6.无提示关闭页面的方法
JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht
JavaScript弹出窗口DIV层效果代码
jQuery popup javascript 弹出窗口 可遮盖IE6的select 点击其它地方自动隐藏 兼容IE,FF等浏览器
javascript常用弹出窗口,对于初学asp.net的人有很大的帮助。
JavaScript弹出窗口方法汇总_.docx
本文给大家分享的是在ECShop的项目中使用到的一个小功能,使用JavaScript实现弹出窗口中增加确定取消按钮,有需要的小伙伴可以参考下
这里把弹出窗口的制作和应用技巧基本上算是完成了,并且都有代码供用户来参考,相信下载肯定有所收获
一个使用简单方便的div弹出窗口拖拽插件,纯javascript
本文中我将展示如何在一个 ASP.NET 应用程序中创建一个弹出窗口 (使用 JavaScript)和如何从弹出窗口返回值到原始的调用页面并自动引发该页上的按钮的单击事件。另外,使用MultiView 控件和带分页的GridView 控件...
一些javascript代码 主要写的是js弹出窗体用的 非常全面 你们看了就知道了 剩下的描述就是凑字数的了 凑字凑字凑字凑字凑字凑字凑字凑字凑字凑字凑字凑字