`
c125543072
  • 浏览: 30112 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS蒙板弹出+关闭

 
阅读更多
function showMenu(content) {
	// 创建蒙板DIV
	var bgObj = document.createElement("div");
	// 蒙板样式
	bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:100%;"
			+ "height:100%;filter:Alpha(Opacity=30);opacity:0.3;"
			+ "background-color:#000000;z-index:101;";
	// 使用蒙板
	document.body.appendChild(bgObj);
	// 创建菜单栏
	var menuDiv = document.createElement("div");
	// 菜单栏样式
	menuDiv.style.cssText = "width: 540px;height: 262px;position: absolute;"
			+ "top: 30%;left: 50%;margin: -131px 0 0 -270px"
			+ ";text-align:center;background-color:white;padding:1px;line-height:22px;z-index:102;";
	// 使用菜单栏
	document.body.appendChild(menuDiv);
	var top = getPos(menuDiv)[0] - 10;
	var left = getPos(menuDiv)[1] + 520;
	// 创建关闭按钮
	var closeBtn = document.createElement("img");
	closeBtn.onclick = function() {
		document.body.removeChild(bgObj);
		document.body.removeChild(menuDiv)
		document.body.removeChild(closeBtn);
	};
	closeBtn.id = "closeBtn";
	// 关闭按钮样式
	closeBtn.style.cssText = "height:31px;width:31px;display:block;z-index:103;position:absolute;"
			+ "top:" + top + ";left:" + left + ";cursor: pointer;";
	// 填充关闭按钮内容
	closeBtn.src = "Images/Main/closeImg.png";
	// 使用关闭按钮
	document.body.appendChild(closeBtn);
	// 填充菜单栏内容
	menuDiv.innerHTML = content;
	function getEvent() {
		return window.event || arguments.callee.caller.arguments[0];
	}
}

//获取控件绝对位置
function getPos(active) {
	var t = active.offsetTop;
	var l = active.offsetLeft;
	while (active = active.offsetParent) {
		t += active.offsetTop;
		l += active.offsetLeft;
	}
	return new Array(t,l);
}
分享到:
评论

相关推荐

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

    弹出层可以通过JavaScript控制显示和隐藏,与蒙板结合使用,可以创建更好的用户体验。以下是一个简单的HTML弹出层结构: ```html <!-- 在这里放置弹出层的具体内容 --> ``` 为了使弹出层在页面上定位,我们...

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

    在微信小程序开发中,创建蒙版弹出窗功能是一项常见的需求,通常用于显示警告、确认对话框或者加载提示等。本文将详细讲解如何通过WXML、WXSS和JS这三种技术来实现这一功能。 首先,我们需要在WXML(微信小程序的...

    js实现的弹出遮罩层特效

    "js实现的弹出遮罩层特效"标题所指的就是利用JavaScript语言来实现这一功能。JavaScript是一种强大的客户端脚本语言,常用于增强网页的动态性和交互性。下面我们将深入探讨如何使用JavaScript来创建一个弹出遮罩层...

    弹出层特效

    在本案例中,我们讨论的是一个基于jQuery的弹出层特效,它具有可拖动和蒙版模式的特点。 jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在弹出层特效中,jQuery可以用于...

    js工具方法弹出蒙版

    ### JS工具方法弹出蒙版知识点详解 #### 一、概述 在Web开发过程中,弹出蒙版(或称为模态对话框)是一种常见的交互设计模式。它可以在不离开当前页面的情况下,为用户提供一个聚焦的操作界面。本次分享的JS工具...

    JS弹出遮罩层

    <title>JS弹出遮罩层 .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; z-index: 9999; } .modal { position: fixed;...

    jquery弹出div图层(带蒙板)

    其次,`dialog.js`是实现弹出div图层和蒙版效果的脚本文件。在这个脚本中,通常会包含自定义的函数,用于创建和控制对话框的显示与隐藏,以及蒙版的添加和移除。这些函数可能包括: 1. `showDialog()`: 显示对话框...

    JS实现弹出居中的模式窗口示例

    本示例将详细介绍如何使用JavaScript实现这样的居中弹出模式窗口。 首先,我们需要了解JavaScript的基本概念。JavaScript是一种广泛使用的客户端脚本语言,它可以直接在用户浏览器中运行,用于处理DOM(Document ...

    各种功能的弹出窗口 带遮罩层/不带带遮罩层

    在弹出窗口关闭后,我们可以利用JavaScript的`window.location.reload()`来刷新调用页面,或者使用`window.location.href`来设置一个新的URL,使页面跳转到指定地址。如果需要在刷新或跳转之前执行某些操作,可以将...

    弹页面窗口

    2. **弹出窗口原理**:弹出窗口通常是通过在当前页面上覆盖一个半透明的灰色背景层(也称为蒙版)和一个独立的浮动层来实现的。灰色背景用于降低主页面的视觉焦点,让用户专注于弹出的内容。 3. **CSS样式**:为了...

    基于Jquery+div+css实现弹出登录窗口(代码超简单)

    本篇文章将介绍如何利用Jquery、Div和CSS技术实现一个简单的弹出登录窗口。在Web开发过程中,实现登录功能是常见需求之一,而弹出式登录窗口可以提供更好的用户体验。下面将详细介绍实现该功能的关键步骤和技术要点...

    Colorbox弹出层插件使用API与中文教程

    例如,`width`和`height`可以设置弹出层的尺寸,`opacity`用于控制蒙版的透明度,`onOpen`和`onClose`是回调函数,分别在弹出层打开和关闭时执行。还有`href`参数,用于指定要显示的内容源,可以是URL、DOM元素或者...

    C# 弹出Loading遮罩层

    在C#编程中,"弹出Loading遮罩层"是一个常见的功能需求,特别是在进行异步操作或者长时间数据加载时,为了提升用户体验,我们会显示一个遮罩层,通常带有"加载中"或"请稍候"的提示信息。下面将详细解释如何在C#中...

    layer弹出层取消遮罩的方法

    在网页开发中,有时我们需要创建弹出层来展示信息或者进行交互操作,layer是一个非常流行的JavaScript弹层插件,尤其在layui框架中被广泛应用。layer提供了丰富的弹出层样式和功能,包括模态对话框、提示信息、加载...

    jquery点击图片全屏效果类似lightbox弹出图片效果.zip

    1. **图片预加载**:在用户点击图片前,Lightbox会预先加载图片,以确保在弹出时能快速显示,避免用户等待。 2. **过渡效果**:当用户点击图片时,Lightbox会使用动画效果淡入或滑动显示全屏图片,增加用户体验的...

    弹框后禁止遮罩层后面页面滚动(兼容ios和android).zip

    "弹框后禁止遮罩层后面页面滚动(兼容ios和android)"这个主题涉及到的是一个常见的问题,即当弹出一个对话框或者遮罩层时,如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同,需要特定的...

    jQuery从不同方向自定义弹出层特效代码

    4. 控制弹出与关闭:通过调用PopupLayer插件提供的方法来控制弹出层的显示和隐藏。 ```javascript // 显示弹出层 $("#popup-layer").popuplayer('open'); // 关闭弹出层 $("#popup-layer").popuplayer('close'); ``...

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

    本示例介绍了一个简单的JavaScript实现页面弹出蒙板的技巧,利用HTML、CSS和JavaScript来创建一个半透明的遮罩层以及一个可自定义的蒙板信息区域。 首先,蒙板主要由两个`div`元素构成:`popWindow`和`maskLayer`。...

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

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

Global site tag (gtag.js) - Google Analytics