`
huaerfan
  • 浏览: 12073 次
  • 性别: 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
分享到:
评论

相关推荐

    制作Javascript弹出窗口技巧九则

    ### 制作Javascript弹出窗口技巧九则 在网页开发中,使用JavaScript创建弹出窗口是一种常见的技术。本文将详细介绍如何使用JavaScript实现弹出窗口功能,并分享九个实用技巧。 #### 技巧一:基本弹出窗口 最简单...

    JAVASCRIPT弹出窗口大总结

    ### JavaScript弹出窗口知识点总结 #### 一、概述 JavaScript是一种广泛使用的脚本语言,它在前端开发中占据着极其重要的地位。通过JavaScript,开发者可以实现网页与用户的交互功能,其中弹出窗口就是一种常见的...

    玩透javascript弹出窗口

    JavaScript弹出窗口是一种常见的网页交互方式,用于向用户展示额外信息或进行特定操作。本文将深入探讨如何设计和控制JavaScript弹出窗口。 首先,最基本的弹出窗口代码是使用`window.open`函数。例如: ```...

    javascript 弹出窗口

    在给定的标题“javascript 弹出窗口”和描述“推荐一个非常好用的javascript弹出窗口控件”中,我们可以推测这是一个关于使用JavaScript实现弹出窗口的控件库。下面我们将深入探讨JavaScript弹出窗口的相关知识点。 ...

    JAVASCRIPT弹出窗口代码

    ### JavaScript弹出窗口代码详解 在网页开发过程中,有时我们需要创建一个新的浏览器窗口来显示特定的信息或功能,这就需要用到JavaScript中的`window.open()`方法。本文将详细介绍如何使用此方法以及其参数的意义...

    javascript弹出窗口lhgdialog

    javascript弹出窗口lhgdialog 非常好用

    jQuery popup javascript 弹出窗口

    总的来说,jQuery popup javascript弹出窗口的实现涉及到JavaScript编程、CSS样式设计、事件处理、浏览器兼容性优化等多个方面,是一个综合性的网页开发任务。通过研究提供的文件,可以深入理解这些技术的结合应用。

    关于JavaScript弹出窗口详解

    本文将深入探讨JavaScript弹出窗口的实现方法和各种自定义选项。 首先,最基本的弹出窗口代码使用`window.open()`函数实现。该函数接受三个参数:要打开的页面URL、新窗口的名称以及一个包含窗口特征的字符串。例如...

    javascript弹出窗口问题总结

    JavaScript弹出窗口是网页交互中常见的一种功能,用于显示额外信息、用户确认或者提供其他交互。本篇文章将针对JavaScript弹出窗口的相关问题进行总结,包括无提示刷新网页、刷新页面的方法、弹出窗口代码、模式窗口...

    JavaScript弹出窗口及与父窗口交互

    在开发Web应用程序时,JavaScript弹出窗口经常被用于提供一种用户友好的交互方式。这篇文章将指导你如何在ASP.NET环境中创建一个JavaScript弹出窗口,并实现弹出窗口与调用窗口之间的通信,包括值的传递以及如何模拟...

    JavaScript弹出窗口DIV层效果代码

    ### JavaScript弹出窗口DIV层效果代码详解 在现代网页设计中,弹出窗口或模态框(Modal)是一种常见的交互模式,用于展示额外的信息、表单或其他内容,而不需重新加载整个页面。本文将深入解析如何使用纯JavaScript...

    JavaScript弹出窗口方法汇总_.docx

    JavaScript 弹出窗口方法汇总 JavaScript 弹出窗口方法是 Web 开发中常用的技术,用于实现弹出窗口、刷新网页、模式窗口等功能。本文将对 JavaScript 弹出窗口方法进行总结和分析,帮助读者更好地理解和应用这些...

    JavaScript弹出窗口详解.mht

    JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht,JavaScript弹出窗口详解.mht

    asp.net常用的javascript弹出窗口代码

    ### ASP.NET 中 JavaScript 弹出窗口的常用代码详解 在 Web 开发中,JavaScript 的弹出窗口功能是非常实用且常见的一个特性。对于 ASP.NET 开发者来说,掌握这些技巧能够帮助他们在开发过程中更加灵活地控制页面...

    JavaScript弹出窗口拖拽插件

    JavaScript弹出窗口拖拽插件是一种实用的前端技术,它允许用户通过鼠标操作来改变div元素(即弹出窗口)的位置。这种插件基于JavaScript语言,无需依赖其他库如jQuery,因此具有轻量级和高效的特性。在网页设计中,...

    基于Jquery的Javascript弹出窗口

    【基于Jquery的Javascript弹出窗口】是一种在网页中实现交互式信息提示的技术,它能够以更为优雅的方式替代传统的浏览器alert、confirm和prompt对话框。Jquery是一个强大的JavaScript库,它简化了DOM操作,事件处理...

    javascript弹出窗口中增加确定取消按钮

    在Web开发中,使用JavaScript弹出窗口来获取用户的确认或者提供额外的操作选项是一种常见的交互方式。本文主要介绍如何在ECShop这样的电子商务平台上,通过JavaScript代码实现在弹出窗口中增加“确定”和“取消”...

Global site tag (gtag.js) - Google Analytics