JS实现可自定义大小,可双击关闭的弹出层效果


Posted in Javascript onOctober 16, 2015

本文实例讲述了JS实现可自定义大小,可双击关闭的弹出层效果。分享给大家供大家参考。具体如下:

这是一款JS弹出层,可自定义大小,双击关闭层,可以弹出500,300、500,500大小的窗口,窗口弹出后,在弹出窗口内双击即可关闭鼠标。我觉得挺不错的效果,可以学习到不少的JS知识。

运行效果截图如下:

JS实现可自定义大小,可双击关闭的弹出层效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<title>JS弹出层</title>
<style>
body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}
</style>
<script LANGUAGE="JavaScript">
<!--
function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("Loading").innerHTML="";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("Loading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_Dh){ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/50))}
$("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
$("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
OpenNow()
}
var Nw=10,Nh=10;
function OpenNow() {
if (Nw>OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;
if(OverW>Nw||OverH>Nh) {
if(OverW>Nw) {
$("Loading").style.width=Nw+"px";
$("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("Loading").style.height=Nh+"px";
$("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
$("Loading").innerHTML=ChangeDesc;
}
}
//-->
</script>
</head>
<body>
<a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
<a href="javascript:OpenDiv(500,200,'层2<br>双击关闭')">层2 500*200</a><br><br>
<a href="javascript:OpenDiv(200,500,'层3<br>双击关闭')">层3 200*500</a><br><br>
<a href="javascript:OpenDiv(500,500,'层4<br>双击关闭')">层4 500*500</a>
<a href="javascript:OpenDiv(500,500,'层5<br>双击关闭')">层5 500*500</a>
<div id="Loading" style="display:none" ondblclick="this.style.display='none'"></div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
javascript实现3D切换焦点图
Oct 16 #Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 #Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 #Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 #Javascript
javascript实现动态标签云
Oct 16 #Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 #Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 #Javascript
You might like
一棵php的类树(支持无限分类)
2006/10/09 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
PHP 面向对象详解
2012/09/13 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
php面向对象重点知识分享
2019/09/27 PHP
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
webpack写jquery插件的环境配置
2017/12/21 jQuery
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
python实现apahce网站日志分析示例
2014/04/02 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python matplotlib拟合直线的实现
2019/11/19 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
策划主管的工作职责
2013/11/24 职场文书
查环查孕证明
2014/01/10 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
企业党员个人自我评价
2014/09/20 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
工作简历的自我评价
2019/05/16 职场文书