`
hedahai119
  • 浏览: 106383 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

js弹出窗(背景是蒙板)

    博客分类:
  • js
阅读更多
function alertWin(title, msg, w, h){ 
	var titleheight = "22px";//提示窗口标题高度 
	var bordercolor = "#0051AA";//提示窗口的边框颜色 
	var titlecolor = "#FFFFFF";//提示窗口的标题颜色 
	var titlebgcolor = "#0051AA";//提示窗口的标题背景色
	var bgcolor = "#FFFFFF";//提示内容的背景色
	var iWidth = document.documentElement.clientWidth; 
	var iHeight = document.documentElement.clientHeight; 
	var bgObj = document.createElement("div"); 
	bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
	document.body.appendChild(bgObj); 
	var msgObj=document.createElement("div");
	msgObj.style.cssText = "position:absolute;font:14px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w)/2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
	document.body.appendChild(msgObj);
	var table = document.createElement("table");
	msgObj.appendChild(table);
	table.style.cssText = "margin:0px;border:0px;padding:0px;";
	table.cellSpacing = 0;
	var tr = table.insertRow(-1);
	var titleBar = tr.insertCell(-1);
	titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
	titleBar.style.paddingLeft = "10px";
	titleBar.innerHTML = title;
	var moveX = 0;
	var moveY = 0;
	var moveTop = 0;
	var moveLeft = 0;
	var moveable = false;
	var docMouseMoveEvent = document.onmousemove;
	var docMouseUpEvent = document.onmouseup;
	titleBar.onmousedown = function() {
		var evt = getEvent();
		moveable = true; 
		moveX = evt.clientX;
		moveY = evt.clientY;
		moveTop = parseInt(msgObj.style.top);
		moveLeft = parseInt(msgObj.style.left);
		document.onmousemove = function() {
			if (moveable) {
				var evt = getEvent();
				var x = moveLeft + evt.clientX - moveX;
				var y = moveTop + evt.clientY - moveY;
				if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
					msgObj.style.left = x + "px";
					msgObj.style.top = y + "px";
				}
			}	
		};
		document.onmouseup = function () { 
			if (moveable) { 
				document.onmousemove = docMouseMoveEvent;
				document.onmouseup = docMouseUpEvent;
				moveable = false; 
				moveX = 0;
				moveY = 0;
				moveTop = 0;
				moveLeft = 0;
			} 
		};
	}
	var closeBtn = tr.insertCell(-1);
	//得到是从哪来的,关闭窗口后跳回。
	var path =document.getElementById("pathMsg").value;
	
	closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
	closeBtn.innerHTML = "<span style='font-size:15px; color:"+titlecolor+";'>×</span>";
	closeBtn.onclick = function(){ 
		document.body.removeChild(bgObj); 
		document.body.removeChild(msgObj);
		//关闭窗口后跳回。
		window.location.href =path;
	} 
	var msgBox = table.insertRow(-1).insertCell(-1);
	msgBox.style.cssText = "font:14px '宋体';";
	msgBox.colSpan  = 2;
	msgBox.innerHTML = "<table>"
		             + "<tr>"
		             + "<td><img src='/imgs/cl_2.gif'></td>"
		             + "<td style='text-align:left;'>"+msg+"</td>"
	                 + "</tr>"
	                 + "</table>";
    //获得事件Event对象,用于兼容IE和FireFox
    function getEvent() {
	    return window.event || arguments.callee.caller.arguments[0];
    }
} 

分享到:
评论

相关推荐

    实现网页蒙板效果和弹出层的html示例

    现在,我们需要用JavaScript来控制蒙板和弹出层的显示和隐藏。这里有一个简单的示例,使用了JavaScript的DOM操作和事件监听: ```html ()"&gt;显示弹出层 function showPopup() { var mask = document....

    jquery弹出div图层(带蒙板)

    1. `showDialog()`: 显示对话框,同时在背景上添加一个半透明的蒙版,使得用户无法与页面其他部分交互,专注于当前的弹出层。 2. `hideDialog()`: 隐藏对话框,同时移除蒙版,恢复页面的正常交互。 3. `createMask()...

    javascript 窗口加载蒙板 内嵌网页内容

    这种技术可以广泛应用于各种web应用程序中,例如弹出层、对话框、提示框等。 javascript 实现窗口加载蒙板的技术要点 1. 创建蒙板容器:使用javascript创建一个div容器,作为蒙板的容器,并设置其样式和布局。 2....

    js实现在页面上弹出蒙板技巧简单实用

    在这个例子中,我们将深入探讨如何使用JavaScript和CSS在页面上弹出一个简单的蒙板。 首先,蒙板主要由两个`div`元素组成:`popWindow`和`maskLayer`。`popWindow`用于覆盖整个页面,呈现半透明效果,起到遮挡页面...

    微信小程序实现蒙版弹出窗功能

    3. 在JS中处理数据和事件,通过改变`showModal`状态控制弹出窗的显示与隐藏。 通过这种方式,我们可以灵活地在微信小程序中创建具有蒙版效果的弹出窗,并根据实际需求调整样式和内容。同时,这样的设计也方便与其他...

    Jnet功能强大的JS类,浮动,模态,遮罩弹出等效果.rar

    Jnet功能强大的JS类,浮动,模态,遮罩弹出等效果,这些弹出框很漂亮,分有蒙板和无蒙板,功能有Alert弹出提示、Confirm确认提示、iFrame框架、iFrame内嵌自定义弹出框等。从形式上来说,每个弹出框在使用时可设置弹出...

    基于JavaScript实现图片点击弹出窗口而不是保存

    一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件。 实现的思路是通过编写hook图片的onclick事件的函数...

    JavaScript蒙板(model)功能的简单实现代码

    ()"&gt;弹出蒙板 ()"&gt; &lt;!-- 内容 --&gt; ``` 在这个例子中,蒙板会在用户点击“弹出蒙板”按钮时显示,当用户点击蒙板本身或其中的关闭按钮时消失。 总结来说,实现JavaScript蒙板功能的关键在于正确设置CSS样式以实现...

    javascript创建页面蒙板的一些知识技巧总结第1/3页

    这种方式适用于全屏蒙板或弹出框等场景。 4. **局部蒙板的应用** 对于局部蒙板,例如日期选择器或弹出提示等,通常采用`iframe`和`div`相结合的方式。这样既可以避免`&lt;select&gt;`等元素的问题,又能够精确控制遮挡...

    html5蒙层效果

    HTML5蒙层效果是一种网页设计技术,用于在页面上创建半透明覆盖层,通常用于显示弹出窗口、对话框或加载指示器等交互元素。这种效果可以增强用户体验,因为它们可以暂时屏蔽背景内容,使用户专注于当前的任务或信息...

    Jnet 网页浮动提示框控件,内附测试示例

    内容索引:脚本资源,Ajax/JavaScript,浮动框,提示框 Jnet 网页浮动框控件,内附测试示例,这些弹出框很漂亮,分有蒙板和无蒙板,功能有Alert弹出提示、Confirm确认提示、iFrame框架、iFrame内嵌自定义弹出框等。...

Global site tag (gtag.js) - Google Analytics