如何创建一个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 17 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
js获取图片的base64编码并压缩
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
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
Node.js事件驱动
2015/06/18 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
PyCharm代码格式调整方法
2018/05/23 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
CSS3——齿轮转动关键代码
2013/05/02 HTML / CSS
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
晚宴邀请函范文
2014/01/15 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
工作自我评价范文
2015/03/05 职场文书
离职信范文
2015/06/23 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android
pandas中关于apply+lambda的应用
2022/02/28 Python