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);
}
分享到:
相关推荐
弹出层可以通过JavaScript控制显示和隐藏,与蒙板结合使用,可以创建更好的用户体验。以下是一个简单的HTML弹出层结构: ```html <!-- 在这里放置弹出层的具体内容 --> ``` 为了使弹出层在页面上定位,我们...
在微信小程序开发中,创建蒙版弹出窗功能是一项常见的需求,通常用于显示警告、确认对话框或者加载提示等。本文将详细讲解如何通过WXML、WXSS和JS这三种技术来实现这一功能。 首先,我们需要在WXML(微信小程序的...
"js实现的弹出遮罩层特效"标题所指的就是利用JavaScript语言来实现这一功能。JavaScript是一种强大的客户端脚本语言,常用于增强网页的动态性和交互性。下面我们将深入探讨如何使用JavaScript来创建一个弹出遮罩层...
在本案例中,我们讨论的是一个基于jQuery的弹出层特效,它具有可拖动和蒙版模式的特点。 jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在弹出层特效中,jQuery可以用于...
### JS工具方法弹出蒙版知识点详解 #### 一、概述 在Web开发过程中,弹出蒙版(或称为模态对话框)是一种常见的交互设计模式。它可以在不离开当前页面的情况下,为用户提供一个聚焦的操作界面。本次分享的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;...
其次,`dialog.js`是实现弹出div图层和蒙版效果的脚本文件。在这个脚本中,通常会包含自定义的函数,用于创建和控制对话框的显示与隐藏,以及蒙版的添加和移除。这些函数可能包括: 1. `showDialog()`: 显示对话框...
本示例将详细介绍如何使用JavaScript实现这样的居中弹出模式窗口。 首先,我们需要了解JavaScript的基本概念。JavaScript是一种广泛使用的客户端脚本语言,它可以直接在用户浏览器中运行,用于处理DOM(Document ...
在弹出窗口关闭后,我们可以利用JavaScript的`window.location.reload()`来刷新调用页面,或者使用`window.location.href`来设置一个新的URL,使页面跳转到指定地址。如果需要在刷新或跳转之前执行某些操作,可以将...
2. **弹出窗口原理**:弹出窗口通常是通过在当前页面上覆盖一个半透明的灰色背景层(也称为蒙版)和一个独立的浮动层来实现的。灰色背景用于降低主页面的视觉焦点,让用户专注于弹出的内容。 3. **CSS样式**:为了...
本篇文章将介绍如何利用Jquery、Div和CSS技术实现一个简单的弹出登录窗口。在Web开发过程中,实现登录功能是常见需求之一,而弹出式登录窗口可以提供更好的用户体验。下面将详细介绍实现该功能的关键步骤和技术要点...
例如,`width`和`height`可以设置弹出层的尺寸,`opacity`用于控制蒙版的透明度,`onOpen`和`onClose`是回调函数,分别在弹出层打开和关闭时执行。还有`href`参数,用于指定要显示的内容源,可以是URL、DOM元素或者...
在C#编程中,"弹出Loading遮罩层"是一个常见的功能需求,特别是在进行异步操作或者长时间数据加载时,为了提升用户体验,我们会显示一个遮罩层,通常带有"加载中"或"请稍候"的提示信息。下面将详细解释如何在C#中...
在网页开发中,有时我们需要创建弹出层来展示信息或者进行交互操作,layer是一个非常流行的JavaScript弹层插件,尤其在layui框架中被广泛应用。layer提供了丰富的弹出层样式和功能,包括模态对话框、提示信息、加载...
1. **图片预加载**:在用户点击图片前,Lightbox会预先加载图片,以确保在弹出时能快速显示,避免用户等待。 2. **过渡效果**:当用户点击图片时,Lightbox会使用动画效果淡入或滑动显示全屏图片,增加用户体验的...
"弹框后禁止遮罩层后面页面滚动(兼容ios和android)"这个主题涉及到的是一个常见的问题,即当弹出一个对话框或者遮罩层时,如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同,需要特定的...
4. 控制弹出与关闭:通过调用PopupLayer插件提供的方法来控制弹出层的显示和隐藏。 ```javascript // 显示弹出层 $("#popup-layer").popuplayer('open'); // 关闭弹出层 $("#popup-layer").popuplayer('close'); ``...
本示例介绍了一个简单的JavaScript实现页面弹出蒙板的技巧,利用HTML、CSS和JavaScript来创建一个半透明的遮罩层以及一个可自定义的蒙板信息区域。 首先,蒙板主要由两个`div`元素构成:`popWindow`和`maskLayer`。...
这种技术可以广泛应用于各种web应用程序中,例如弹出层、对话框、提示框等。 javascript 实现窗口加载蒙板的技术要点 1. 创建蒙板容器:使用javascript创建一个div容器,作为蒙板的容器,并设置其样式和布局。 2....