使用div实现的弹出层效果，带遮罩层和透明度效果
代码：
(function(){
if(window.popwindow)return;
var rootEl = null;
var maskel = null;
var winel = null;
window.popwindow = {
_init:function(){
rootEl = document.body;
rootEl.appendChild(div);
maskel = $('fill-mask');
winel = $('fill-window');
maskel.attachEvent("onclick",function(){
setStyle(maskel,{
display:'none'
});
setStyle(winel,{
display:'none'
});
});
},
show:function(cfg){
this._init();
var pos = getPos(cfg.width,cfg.height);
if(cfg.ajax){
toServer({
url:cfg.url,
param:cfg.param
});
}else{
winel.innerHTML = cfg.src;
}
setStyle(winel,{
left:(pos[0])+'px',
top:(pos[1])+'px',
width:cfg.width+'px',
height:cfg.height+'px',
display:''
});
var winSize = getWinSize();
setStyle(maskel,{
width:winSize[0]+'px',
height:winSize[1]+'px',
display:''
});
}
}
var $ = function(id){return document.getElementById(id)};
var div = document.createElement("<div>");
var strHTML = "";
strHTML += "<div id='fill-mask' oncontextmenu='return false;' onselectstart='return false;' style='position:absolute;z-index:10000;top:0;left:0;filter:alpha(opacity=50);background:#000'></div>";
strHTML += "<div id='fill-window' oncontextmenu='return false;' onselectstart='return false;' style='position:absolute;z-index:10001;'></div>";
div.innerHTML = strHTML;
var getPos = function(width,height){
var winSize = getWinSize();
var offWidth = winSize[0];
var offHeight = winSize[1];
var clientX = window.event.clientX+10;
var clientY = window.event.clientY+10;
if(clientX+width > offWidth){
clientX = clientX - width - 20;
}
if(clientY+height > offHeight){
clientY = clientY - height - 20;
}
return [clientX,clientY];
}
var getWinSize = function() {
return [Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth), Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)]
};
var setStyle = function(el,o){
for (var i in o)el.style[i] = o[i]
}
var toServer = function(obj){
var xhr = false;
if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
xhr.open("POST",obj.url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.param);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var rv= xhr.responseText;
if(rv == "")return false;
winel.innerHTML = rv;
}
}
}
}
})();
测试页面：
<html>
<head>
<script type="text/javascript" src="popwindow.js"></script>
<script type="text/javascript">
function showMenu(){
popwindow.show({
width:200,
height:150,
ajax:false,
url:"",//可以ajax获取jsp资源
param:"",
src:"<div style='width:200px;height:100px;background-color:orange;'>哇哈哈</div>"
});
}
</script>
</head>
<body>
<input type="button" name="test" value="test" onclick="showMenu();">
</body>
</html>
分享到：
相关推荐
在网页设计中，"实用div实现的弹出层" 是一种常见的交互元素，它用于创建弹出式的对话框或菜单，以提供额外的信息或者功能，而不会干扰到页面的主体内容。这种技术主要依赖于HTML的`<div>`元素，CSS（层叠样式表）...
js div简单的弹出层，带遮罩的，简单实用
"18种非常实用的js弹出层"集合提供了多种不同的实现方式，旨在帮助开发者在项目中创建功能丰富、用户体验良好的弹出层。下面，我们将深入探讨这些知识点。 首先，我们要理解什么是弹出层。弹出层是一种在主页面上...
在本文中，我们将深入探讨如何在layui框架中利用弹出层（layer）进行回调操作，以便获取弹出层内的数据。layui是一个轻量级、模块化的前端UI框架，提供了丰富的组件，包括弹出层功能，使得用户交互变得更加便捷。在...
本资源“漂亮的div弹出窗口样式”提供了一种美观的弹出窗口设计，适用于网页中的各种提示、警告或者信息展示。通过解压文件并双击html页面，我们可以直接预览这个弹出窗口的效果。 首先，我们来详细了解一下div弹出...
标签中提到的“动画”是指在div弹出和关闭时可能加入的过渡效果。这可以通过CSS3的transition属性实现，比如设置`opacity`（透明度）和`transform`（变换）属性的过渡，使得div的出现和消失更加平滑。此外，还可以...
遮罩层通常是一个半透明的div元素，覆盖在网页内容之上，用于突出显示弹出层或者阻止用户与背景内容交互。它提供了一种优雅的方式来聚焦用户的注意力，使得弹出层的内容更为突出。 在“描述”中提到，这款弹出层...
本主题将深入探讨如何使用jQuery实现一个简单的、实用的iframe弹出层。通过这个教程，您将了解到如何创建一个能够加载外部网页或内容到弹出窗口中的功能。 首先，确保在您的项目中引入了jQuery库。您可以从jQuery...
1. 创建HTML结构：定义一个隐藏的div作为弹出层，包含需要展示的内容。 2. 编写CSS样式：设定弹出层的位置、大小、背景透明度等属性，以及动画效果。 3. 使用jQuery控制显示和隐藏：通过`.show()`、`.hide()`、`....
使用`<div>`元素实现弹出层是一个基础且实用的方法，通过结合HTML、CSS和JavaScript，我们可以创建具有交互性和视觉吸引力的弹出层。随着技术的深入，还可以引入框架如jQuery或现代的React、Vue等，来实现更复杂的...
实现这一效果，开发者通常会在弹出层下方添加一个全屏的半透明div，设置合适的背景颜色和透明度。通过CSS的`opacity`和`background-color`属性可以调整遮罩的透明度和颜色。 在技术实现上，"超级漂亮的弹出层效果...
在网页设计中，"div_css_js弹出层有遮罩"是一个常见的交互设计技术，用于创建弹出式窗口或对话框，通常用于显示通知、表单、广告等。...通过熟练掌握这些知识点，可以创建出既美观又实用的弹出层效果。
在JavaScript中，实现一个div弹出层是一项...以上就是使用JavaScript实现div弹出层的完整方法，这个实例不仅提供了基本的弹出功能，还考虑了用户体验，如拖拽和自定义显示效果，对于Web开发者来说具有很高的实用价值。
总的来说，创建一个能够动态调用页面的Div弹出层涉及HTML、CSS、JavaScript/jQuery的综合运用，以及对用户体验的考量。理解这些技术并熟练运用，可以帮助你构建更加互动和用户友好的Web应用程序。
这个图片可能被用作CSS背景图像，设置在弹出层的一个特定元素上，如关闭按钮的div标签。 在实际应用中，弹出层的实现涉及到以下几个关键点： 1. **触发事件**：用户与页面上的某个元素交互，如点击按钮，触发...
"带关闭按钮jquery+div消息弹出层代码例子"是一个典型的实践，它结合了jQuery库和HTML/CSS中的div元素来实现一种常见但实用的功能：消息弹出层。这个功能允许网站向用户显示临时通知、提示信息或确认对话框，而用户...
本实例是基于JavaScript实现的一个“超漂亮的仿腾讯弹出层效果”，旨在为开发者提供一个美观且实用的弹出层解决方案。下面我们将详细探讨这个实例中涉及的技术点。 首先，我们来分析“仿腾讯弹出层效果”这一概念。...
总的来说，jQuery弹出层插件是Web开发中的实用工具，它简化了弹出层的创建和管理，使得开发者能更专注于应用逻辑而不是基础的交互设计。无论是简单的提示信息还是复杂的对话框，jQuery弹出层插件都能提供灵活的解决...
**zDialog：jQuery 弹出层插件详解** 在网页设计和开发中，弹出层是一种常见的交互元素，用于显示消息、警告、确认对话框或进行表单输入等。zDialog是一个基于jQuery的轻量级弹出层插件，它为开发者提供了便捷的...
在网页设计中，弹出层和图片轮播是两种常见的交互元素，它们能提升用户体验，增强网站的吸引力。本文将详细讲解如何使用JavaScript（JS）实现一个简单的弹出层，并结合图片轮播功能。 首先，让我们关注弹出层的实现...