`

几个JS弹出层效果

IEFirefoxJ#XHTMLHTML 
阅读更多
一：简单的 
<script>
var docEle = function() {
  return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
  var m = "mask";
  if (docEle(_id)) document.removeChild(docEle(_id));
  if (docEle(m)) document.removeChild(docEle(m));
  // 新激活图层
  var newDiv = document.createElement("div");
  newDiv.id = _id;
  newDiv.style.position = "absolute";
  newDiv.style.zIndex = "9999";
  newDiv.style.width = "200px";
  newDiv.style.height = "300px";
  newDiv.style.top = "100px";
  newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中
  newDiv.style.background = "#EFEFEF";
  newDiv.style.border = "1px solid #860001";
  newDiv.style.padding = "5px";
  newDiv.innerHTML = "新激活图层内容";
  document.body.appendChild(newDiv);
  // mask图层
  var newMask = document.createElement("div");
  newMask.id = m;
  newMask.style.position = "absolute";
  newMask.style.zIndex = "1";
  newMask.style.width = document.body.scrollWidth + "px";
  newMask.style.height = document.body.scrollHeight + "px";
  newMask.style.top = "0px";
  newMask.style.left = "0px";
  newMask.style.background = "#000";
  newMask.style.filter = "alpha(opacity=40)";
  newMask.style.opacity = "0.40";
  document.body.appendChild(newMask); 
  // 关闭mask和新图层
  var newA = document.createElement("a");
  newA.href = "#";
  newA.innerHTML = "关闭激活层";
  newA.onclick = function() {
   document.body.removeChild(docEle(_id));
   document.body.removeChild(docEle(m));
   return false;
  }
  newDiv.appendChild(newA);
}
</script>


二：可移动的(并且考虑了select元素) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>兼容FF/IE的可移动弹出层</title><style type="text/css">
.button1 {background: #ebebeb;
border: 1px solid #888888;
color:#333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height:23px;
cursor:pointer }
</style>
<script language="javascript">
function alertWin(title, msg, w, h){
var s=document.getElementsByTagName("select"); //--------------把所有select标签捉住
for(var j=0;j<s.length;j++){s[j].style.display="none";} //--------------设为不显示，再进行下面操作
var titleheight = "20px"; // 提示窗口标题高度
var bordercolor = "#666699"; // 提示窗口的边框颜色
var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色
var titlebgcolor = "#1d5798"; // 提示窗口的标题背景色
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=10);opacity:0.1;background-color:#000000;z-index:101;";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div");
msgObj.style.cssText = "position:absolute;font:11px '宋体';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);
closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
closeBtn.onclick = function(){
for(var j=0;j<s.length;j++){s[j].style.display="";} //--------------再给select显出来
document.body.removeChild(bgObj);
document.body.removeChild(msgObj);
}
var msgBox = table.insertRow(-1).insertCell(-1);
msgBox.style.cssText = "font:10pt '宋体';";
msgBox.colSpan  = 2;
msg="<table><tr><td><form id=form1 action=''>用户名<input type='text' name='textfield' />密码<input type='text' name='textfield2' /></label></form></td></tr><table>";
msgBox.innerHTML = msg;
// 获得事件Event对象，用于兼容IE和FireFox
function getEvent() {
return window.event || arguments.callee.caller.arguments[0];
}
}
</script>
</head>
<body>
<input type="button"  value="  点这里  " onclick="alertWin('标题','这里是内容，弹出层可以移动，弹出层可以关闭',600,150);" />
<select name="select" style="width: 150px">
                                            <option value="1">雅思考试</option>
                                            <option value="2">托福考试</option>
                                            <option value="3">SAT考试</option>
                                            <option value="4">GMAT考试</option>
                                        </select>
</body>
</html>
分享到：
| Oracle数据类型的隐性转换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 弹出层　效果　仿百度

    首先，"js弹出层效果案例"可能包含以下几个关键组成部分： 1. **HTML结构**：这是构建弹出层的基础，通常包括一个隐藏的弹出层元素（如div）和触发弹出的元素（如按钮）。在`访问脚本之家.html`和`服务器常用软件....

    简单精美js弹出层效果

    "简单精美js弹出层效果"这个主题，就是关于如何使用JavaScript来创建既美观又易于使用的弹出层。 首先，我们需要理解弹出层的基本概念。弹出层，也称为模态窗口或对话框，是在网页主内容上覆盖的一个浮动元素，通常...

    JavaScript弹出层

    JavaScript弹出层是网页开发中常见的一种交互设计，它用于在用户与页面交互时提供额外信息、确认操作或展示复杂内容。Js弹出层库则是专门为此目的设计的JavaScript库，简化了弹出层的创建和管理过程。在这个场景中，...

    js弹出层 城市切换效果

    JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，实现动态内容、用户交互、...通过这些步骤，你可以构建一个功能完善的JavaScript弹出层城市切换效果，为用户提供流畅且直观的交互体验。

    js弹出层并获取弹出层文本内容

    在"js弹出div获取弹出层中文本值"这个场景中，我们将讨论如何利用JavaScript实现这一功能，并确保它在主流浏览器如IE6+、Firefox（ff）等上兼容。 首先，我们需要创建一个可隐藏的div元素作为弹出层，然后在需要的...

    [WEB开源]弹出层效果

    “弹出层效果”这个标签强调了技术的焦点在于如何在网页上实现一个动态显示和隐藏的附加界面。弹出层的实现方式多样，可以基于框架如jQuery UI、Bootstrap的弹窗插件，也可以使用纯JavaScript或Vue、React等现代前端...

    可自定义js弹出层动画特效.zip

    在这个"可自定义js弹出层动画特效.zip"压缩包中，我们找到了一个JavaScript弹出层插件，它专门设计用来增强用户体验，提供多样化的弹出层显示方式。 首先，让我们了解一下弹出层（Popup Layer）的概念。弹出层是在...

    DZ论坛弹出层效果

    实现DZ论坛弹出层效果，主要涉及以下几个关键技术点： 1. HTML结构：创建一个隐藏的弹出层元素，可以通过CSS的`display:none`属性实现初始隐藏。触发元素则需要添加特定的事件监听器，如JavaScript的`...

    js 实现弹出层

    本文将深入探讨如何使用JavaScript来实现弹出层效果，包括各种不同的弹出层类型及其应用场景。 首先，我们需要了解弹出层的基本结构。一个弹出层通常包含以下几个部分：背景遮罩层、内容容器、关闭按钮（可选）以及...

    js弹出层实现

    标题中的“js弹出层实现”指的是在网页中使用JavaScript技术来创建弹窗或对话框的功能。这种功能在网页交互中十分常见，用于显示警告、提示、确认信息或者提供更丰富的用户界面元素。JavaScript，作为浏览器端的主要...

    js透明弹出层

    通过熟练掌握这些知识点，开发者可以创建出符合需求且具有良好用户体验的透明弹出层效果。在提供的压缩包文件"myjs"中，可能包含了实现这一功能的示例代码，学习和研究这些代码将有助于深入理解上述概念。

    漂亮的js可移动弹出层

    在网页设计中，弹出层是一种常见的交互元素，它可以在用户与页面进行特定操作时，显示额外的信息或者功能。...开发者可以通过研究这些文件，学习如何创建类似的弹出层效果，并将其应用到自己的项目中。

    js、jquery阴影效果弹出层

    总结起来，实现阴影效果弹出层主要涉及以下几个步骤： 1. 在HTML中创建弹出层元素，并添加`box-shadow`样式实现阴影效果。 2. 引入jQuery库，利用其提供的动画方法控制弹出层的显示和隐藏。 3. 可选：通过监听事件和...

    js弹出层暂停实现模式窗口效果(修改后的)

    在JavaScript编程中，"弹出层"通常指的是...通过合理地组合这些技术，可以创建出功能完备且用户体验良好的弹出层效果。在实际开发中，可以参考现有的库或框架，如Bootstrap的Modal组件，以简化工作并提高代码的复用性。

    javascript弹出层表单提交代码

    JavaScript弹出层表单提交是一种常见的用户交互设计，它允许用户在不离开当前页面的情况下填写并提交表单数据。这种技术常用于网站的登录、注册、评论或编辑功能，提供了良好的用户体验，因为用户无需跳转到新页面...

    几种网页弹出层的实例

    这些实例可以帮助开发者更好地理解和实现各种弹出层效果。 1. 带遮罩层的弹出层： 遮罩层通常用于创建一个半透明的背景，以突出显示弹出层内容，并防止用户与页面其他部分交互。在"弹出Div锁定桌面.rar"中，你可能...

    js漂亮弹出层 对话框

    在本文中，我们将深入探讨JavaScript弹出层的设计原则、实现方法以及一些实用的库和技巧。 首先，JavaScript是一种广泛用于网页动态交互的编程语言，它可以创建交互式的用户界面，包括弹出层。弹出层通常分为两种...

    jquery+css3实现的经典弹出层效果示例

    本示例主要探讨如何利用jQuery和CSS3技术来实现灵活且具有动画效果的弹出层。下面将详细阐述实现这个功能的关键知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。...

    纯js弹出层layer跨Iframe完美回调

    本话题聚焦于一个纯JavaScript实现的弹出层插件——Layer，它能够实现跨Iframe的完美回调功能。这在处理多窗口、多框架间的通信时显得尤为重要。 Layer插件提供了一种轻量级的解决方案，使得开发者无需依赖其他大型...

    jQuery弹出层 可加载iframe 功能强大 简单易用

    这个功能强大的jQuery弹出层组件有以下几个关键特点： 1. **易用性**：组件可能提供了简单的API或配置选项，使得开发者可以轻松地创建、显示和控制弹出层。 2. **iframe支持**：允许在弹出层内嵌入任何有效的URL，...

Magicbox
Global site tag (gtag.js) - Google Analytics