如何创建一个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 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
Python管理Windows服务小脚本
2018/03/12 Python
pytorch masked_fill报错的解决
2020/02/18 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
简历中求职的个人自我评价
2013/12/03 职场文书
白酒市场开发计划书
2014/01/09 职场文书
社区中秋节活动方案
2014/01/29 职场文书
毕业论文评语大全
2014/04/29 职场文书
党建工作先进材料
2014/05/02 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
政风行风评议整改方案
2014/09/15 职场文书
运动会稿件100字
2014/09/24 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
个人向公司借款协议书
2014/10/09 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL