`
huaerfan
  • 浏览: 11818 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript弹出窗口

阅读更多
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;'>"
			+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ 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
0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics