如何创建一个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 性能优化指南 (1)
May 21 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
jquery提示效果实例分析
Nov 25 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 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用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
会计岗位职责
2013/11/08 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
实施意见格式范本
2015/06/05 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis