<style>
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
var isIe=(document.all)?true:false;
function setSelectState(state)
{
var objl=document.getElementsByTagName('select');
for(var i=0;i<objl.length;i++)
{
objl[i].style.visibility=state;
}
}
function mousePosition(ev)
{
if(ev.pageX || ev.pageY)
{
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
//弹出方法
function showMessageBox(wTitle,content,mwidth)
{
closeWindow();
//by: dcdc723 http://dcdc723.iteye.com
var bWidth=parseInt(document.documentElement.scrollWidth)-20;
var bHeight=parseInt(document.documentElement.scrollHeight)-20;
if(isIe){
setSelectState('hidden');
}
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";
styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
back.style.cssText=styleStr;
document.body.appendChild(back);
showBackground(back,50);
var mesW=document.createElement("div");
mesW.id="mesWindow";//by: dcdc723 http://dcdc723.iteye.com
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='close' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";
var v_top=(document.body.clientHeight-mesW.clientHeight)/2;
v_top+=document.documentElement.scrollTop;
styleStr="top:"+(v_top-180)+"px;left:"+(document.body.clientWidth/2-mesW.clientWidth/2)+"px;position:absolute;width:"+mwidth+";margin-left:-300px;left:50%;z-index:9999;";
mesW.style.cssText=styleStr;//by: dcdc723 http://dcdc723.iteye.com
document.body.appendChild(mesW);
}
//渐变
function showBackground(obj,endInt)
{
if(isIe)
{
obj.filters.alpha.opacity+=5;
if(obj.filters.alpha.opacity<endInt)
{
setTimeout(function(){showBackground(obj,endInt)},5);
}
}else{
var al=parseFloat(obj.style.opacity);al+=0.05;
obj.style.opacity=al;
if(al<(endInt/100))
{setTimeout(function(){showBackground(obj,endInt)},5);}
}
}
function closeWindow()
{
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
if(isIe){
setSelectState('');}
}
//测试弹出
function testMessageBox(ev)
{
var objPos = mousePosition(ev);
messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文content</div>";
showMessageBox('窗口标题title',messContent,objPos,400);
}
</script>
</head>
<body>
<span onClick="testMessageBox(event);">test</span><br>
<span style="font-size:25px" onClick="showMessageBox('测试标题','这里是内容',400);">测试</span>
</body>
</html>
分享到：
相关推荐
JS弹出半透明层,常用代码可用于网站登录或信息查看
在 JavaScript 中，我们定义了两个函数，pupopen() 和 pupclose()，用于控制背景半透明层和弹出窗口的显示和隐藏。 当用户点击“点击这里打开窗口”链接时，pupopen() 函数将被调用，背景半透明层和弹出窗口将被...
javascript 弹出遮罩层,弹出半透明的遮罩层并显示注册文本框内容，让网页更生动
JavaScript+div 半透明弹出层,function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) document.removeChild(docEle(m)); // 新激活图层 var newDiv...
JavaScript 弹出半透明窗口是网页交互中一种常见的设计手法，它可以在用户与网页交互时显示重要的信息或者提示，而不打断用户的浏览体验。通常，这种窗口具有较低的不透明度，使得用户可以看到背景页面的内容，但又...
在网页设计和开发中，创建一个弹出层全屏半透明的效果是一项常见的需求，它可以用于显示重要的信息、对话框或者加载动画等。标题"弹出层全屏半透明（浏览器全兼容）"揭示了我们要讨论的关键技术点：弹出层的实现、...
在本主题中，我们聚焦的是“js透明弹出层”，这是一种常见于网页设计中的功能，它允许在不刷新整个页面的情况下，显示一个覆盖在原有页面上的半透明对话框，用于提示信息、展示详情或接收用户输入。 创建js透明弹出...
"jQuery弹出半透明遮罩层"是一个常见的功能，用于创建一种半透明的覆盖层，通常用于加载提示、模态对话框或阻止用户在特定操作期间与页面其余部分交互。在这个场景中，我们讨论的知识点主要包括jQuery的选择器、DOM...
弹出层，也被称为模态对话框，是在当前页面上覆盖一层半透明或全屏的元素，焦点被锁定在这一层，用户必须先关闭弹出层才能继续与页面交互。实现弹出层的方式有很多种，包括但不限于HTML、CSS和JavaScript的组合使用...
在前端开发中，JavaScript弹出层（也称为模态窗口或对话框）是不可或缺的交互元素，它们用于显示额外信息、获取用户输入或执行特定操作。"18种非常实用的js弹出层"集合提供了多种不同的实现方式，旨在帮助开发者在...
"一个半透明效果的弹出框"是一种创新的UI设计技术，主要用于窗口或对话框的显示，为用户提供一种更加美观且不突兀的交互方式。本文将深入探讨这种半透明弹出框的设计原理、实现方法以及其在实际应用中的优势。 首先...
### JavaScript与HTML5结合实现半透明遮罩层弹框效果详解 #### 一、引言 在现代网页设计中，半透明遮罩层弹框效果是一种非常常见的交互方式，它不仅可以提升用户体验，还能让页面更加美观。通过JavaScript与HTML5的...
本文主要介绍如何利用JavaScript与HTML5实现具有半透明效果的遮罩层弹框。遮罩层弹框是前端开发中常见的交互效果，它通常用于在用户进行某些操作时，显示在页面上层的半透明遮罩，以提示用户当前状态或者用于表单...
在网页设计中，"JavaScript弹出遮盖层"是一个常见且实用的技术，用于创建对话框、提示框或者加载指示器等效果，提供更好的用户体验。 首先，我们需要了解遮盖层（Overlay）的概念。遮盖层是在网页上覆盖一层半透明...
标题中的“js弹出层实现”指的是在网页中使用JavaScript技术来创建弹窗或对话框的功能。这种功能在网页交互中十分常见，用于显示警告、提示、确认信息或者提供更丰富的用户界面元素。JavaScript，作为浏览器端的主要...
在网页设计中，"DIV始终居中的半透明弹出层"是一种常见的用户界面元素，用于显示重要的信息或者交互，如提示、警告、登录框等。本文将深入探讨如何实现这样的功能，包括HTML结构、CSS样式以及可能涉及的JavaScript...
在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...
一个简单的弹出层可以包含一个容器div，用于展示内容，以及一个遮罩层div，用于半透明覆盖整个页面，增强弹出层的焦点感。 ```html ;"> <!-- 在这里放置弹出层的具体内容 --> ;"> ``` 2. CSS样式：为弹出层...
"半透明边框"则是弹出框的一种视觉效果，它可以使弹出框内容与背景页面产生一定的融合，提升用户体验。在本案例中，"school.html" 文件可能是一个演示如何创建具有半透明边框的弹出框的示例。 创建一个兼容各浏览器...
在JavaScript编程中，弹出层（通常称为对话框或模态窗口）是一种常见的用户界面设计技术，用于在用户与主页面交互时显示额外信息或进行特定操作。锁屏功能则是为了防止用户在弹出层显示期间操作背景页面，提供一种...