创建一个弹出DIV窗口
创建一个弹出DIV窗口
摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html
创建一个弹出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>
如果是在asp.net中写的话,注意在用服务器端控件的时候,会postback,所以有2中方式解决它
1. 用html控件
2. 在调用function方法体的最后加上return false; 再在调用的地方return functionname();
创建一个弹出DIV窗口的更多相关文章
- 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
- js 弹出div窗口 可移动 可关闭 (转)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 弹出div窗口 可移动 可关闭
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- [转]创建一个JavaScript弹出DIV窗口层的效果
本文转自:http://www.soso.io/article/23698.html <!doctype html> <html lang="en"> &l ...
- 利用React/anu编写一个弹出层
本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我 ...
- 黄聪:TinyMCE 4 增强 添加样式、按钮、字体、下拉菜单和弹出式窗口
我最喜欢 WordPress 3.9 的更新是使用了 TinyMCE 4.0 编辑器.新的 TinyMCE 看起来看起来更整洁(真正匹配WP仪表板),它有一些非常不错的附加功能.我的很多老主题和插件必 ...
- jQuery 弹出div层
目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ZH奶酪:Ionic中(弹出式窗口)的$ionicModal使用方法
Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用Ja ...
随机推荐
- BW:如何加载和生成自定义的层次结构,在不使用平面文件的SAP业务信息仓库
介绍 通常情况下,报告需要在一个类似树的结构来显示数据.通过启用此特性在SAP BW层次结构.高级数据显示的层次结构的顶层节点.更详细的数据可以向下钻取到的层次结构中的下级节点的可视化. 考虑一个例子 ...
- 封装一个UILabel圆形边框显示进度
封装了一个UILabel并让它显示圆形的边框,UILabel上面显示百份比,而边框则用Animation绘制到整个圆占指定百分比的点. 这只是我个人想的继承一个UILabel实现的,用到两个CASha ...
- ASP.NET MVC 5 局部视图不支持异步问题
[ChildActionOnly] public async Task<ActionResult> TopLeftFlowPartialView() { var user = Sessio ...
- SQL SERVER 服务启动后停止,某些服务由其它服务或程序使用时将自动停止
发生症状: 先是服务器挂掉,之后服务器可以登陆,但是实例却不能登陆进去(部分).出现的错误日志如下: :: R2 (SP2) - 10.50.4000.0 (X64) Jun :: Copyright ...
- Spark 实时计算整合案例
1.概述 最近有同学问道,除了使用 Storm 充当实时计算的模型外,还有木有其他的方式来实现实时计算的业务.了解到,在使用 Storm 时,需要编写基于编程语言的代码.比如,要实现一个流水指标的统计 ...
- 如何查看 exec sp_execute 10 XXX, XXXX的RPC事件 内容
使用事件探查器经常能捕捉到类似于exec sp_execute 10 XXX, XXXX的RPC事件. 我想问下从哪里可以看到存储过程sp_execute 10的内容呢?? 方法如下: 在新建的pro ...
- 针对 SQL Server 2008 在Windows Server 2008上的访问配置 Windows 防火墙
现在Windows Server 2008 服务器用的越来越多,2008的防火墙比2003的有了很大的增强,安全性有了更大的提高. 甚至80端口的出站默认都是被关闭的.所以如果在2008Server上 ...
- GCC 4.8.2 编译安装
https://my.oschina.net/u/728245/blog/184550 摘要: GCC 4.8.2 在 CentOS 6.5 下编译安装小记,遇到一些问题并解决. 以前从没有升级过 ...
- jar包制作
1,利用jdk自带的工具制作 1) 首先要确保所有的java文件都被编译成了.class文件,可以用javac批量编译多个文件 javac c:\java\src\wz\learning\*.java ...
- Python测试基础教程
Python简明教程1-为什么 Pythonhttp://www.automationqa.com/forum.php?mod=viewthread&tid=3674&fromuid= ...