如何创建一个JavaScript弹出DIV窗口层的效果


Posted in Javascript onSeptember 25, 2013

在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果。

创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战;其次,兼容性不够强——有相当多的浏览器屏蔽了这种JS的Alert()方法。于是,一个良好用户体验的网站需要一种更合理的解决方案——使用很少的HTML代码,很少的CSS代码和几行的JavaScript代码来模拟浏览器默认的弹出窗口(即替换掉默认的Alert()界面和功能)。

实现原理:

首先,我们将弹出框中的内容放置在一个特殊的DIV层中,然后默认隐藏它(即初始不可见,使用CSS即可实现)。当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的最上层(将使用JS操作实现)。此外,我们还将在弹出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。

实现过程:

就如我上面提到的,我们首先需要创建一个特殊的DIV层,然后我们将弹出窗口的内容放在这个DIV层里面。在这里,我们将其ID命名为“popupcontent ”以区别于其他DIV层。

<div id="popupcontent">这是一个DIV弹窗效果!</div>

弹出窗口的CSS修饰代码:

接下来,让我们给上面已创建好的这个DIV弹出层进行CSS美化。其中最重要的几个参数分别是:overflow(内容溢出), visibility(可见性) 和position(定位方式)。同时我也给这个窗口效果添加了很多其他代码,但这些只是用于美化,使这个窗口更绚丽。所以,我们最后定义的CSS代码形如:

#popupcontent{ 
position: absolute; 
visibility: hidden; 
overflow: hidden; 
border:1px solid #CCC; 
background-color:#F9F9F9; 
border:1px solid #333; 
padding:5px; 
}

从上面CSS代码中的红色部分可以看出:这个DIV层初始默认状态是不可见的。

大家可以根据需要对以上代码进行美化,但请务必保留position,visibility,overflow三个属性。

JavaScript代码用于触发和显示弹出窗口:

这可能是本教程最重要最有趣的地方了。我们接下来会编写2个过程函数分别用于显示和隐藏上面那个DIV弹窗。当然,这两个函数之中会包含一些主体逻辑。

过程函数中需要顺序包含的逻辑:

计算JavaScript弹出窗口在屏幕上的显示位置(定位);
在弹出窗口中添加一个状态栏(或按钮),用于关闭打开状态下的窗口;
显示弹出窗口。

为了简单起见,本例中我们设置的显示位置是Top:200,Left:200。即以浏览器内容框的左上角为坐标,向下偏移200PX,向左偏移200PX。

弹出窗口的大小我们可以在显示函数的参数中进行设置,包括两个参数:窗口长度和窗口宽度。

如果你需要将本例中的代码进行二次开发,有个地方需要特别注意,那就是获取弹出窗口DIV层的DOM对象,我们可以通过下面这个getElementById函数来获取ID名为“Popcontent”的DOM对象。

var popUp = document.getElementById("popupcontent");

在获取这个(弹出窗口)DOM对象之后,我们可以在JS代码中修改窗口的相对的位置和窗口大小。
popUp.style.top = "200px";//窗口距离浏览器内容区最上方的偏移值 popUp.style.left = "200px";//窗口距离浏览器内容区最左边的偏移值 
popUp.style.width = w + "px";//窗口的宽度 
popUp.style.height = h + "px";//窗口的高度

接下来,我们需要给窗口添加一个“关闭”按钮,用于在窗口开启状态下关闭这个窗口。要完美的实现这一功能,首先我们需要声明一个全局变量,用于存储弹出窗口DIV中的内容。这是因为,如果你在一个页面中显示多个内容不同的弹出窗口,你不需要将按钮重复的复制到这些DIV层中,这样就简化了行为逻辑:
if (baseText == null) baseText = popUp.innerHTML; popUp.innerHTML = baseText + 
"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window <button></div>";

最后一个需要注意的地方是这个“关闭”按钮的定位问题。这个很容易实现,设置一下这个按钮对象的向上的空白边即可(空白边的数值设置成稍小于整个弹出窗口的DIV高度即可)。

至此,所有的行为逻辑讲解完毕,最后的弹窗显示函数的完整代码如下:

var baseText = null; function showPopup(w,h){ 
var popUp = document.getElementById("popupcontent"); 
popUp.style.top = "200px"; 
popUp.style.left = "200px"; 
popUp.style.width = w + "px"; 
popUp.style.height = h + "px"; 
if (baseText == null) baseText = popUp.innerHTML; 
popUp.innerHTML = baseText + "<div id=\"statusbar\"><button onclick=\"hidePopup(); 
\">Close window<button></div>"; 
var sbar = document.getElementById("statusbar"); 
sbar.style.marginTop = (parseInt(h)-40) + "px"; 
popUp.style.visibility = "visible"; 
}

隐藏弹出窗口:

隐藏弹出窗口的过程就相当简单了。只需要首先获取弹出窗口那个DIV的DOM对象,然后将其属性设置成“隐藏”即可。

function hidePopup(){ 
var popUp = document.getElementById("popupcontent"); 
popUp.style.visibility = "hidden"; 
}

拓展HTML代码最终实现弹窗效果:

我们需要做的就是在某个链接或者按钮的对应事件上添加JS函数“showPopup() ”即可。

比如,需要在鼠标移动到某连接上时弹出窗口:

<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>

需要在鼠标点击某个连接时弹出窗口:

<a href="#" onclick="showPopup(300,200);" >Open popup</a>

Javascript 相关文章推荐
JQuery跨Iframe选择实现代码
Aug 19 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 #Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 #Javascript
JS 实现导航栏悬停效果(续)
Sep 24 #Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 #Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 #Javascript
基于jquery实现的省市区级联无ajax
Sep 24 #Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 #Javascript
You might like
php自动跳转中英文页面
2008/07/29 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
学习node.js 断言的使用详解
2019/03/18 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
商场促销活动总结
2014/07/10 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
公司承诺书格式范文
2015/04/28 职场文书
计算机教师工作总结
2015/08/13 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis