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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-define-close-able-alert-dlg-demo/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现仿Discuz文本框弹出层效果

    js实现仿Discuz文本框弹出层效果

    本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

  • JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关. body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下

  • JS实现仿微博可关闭弹出层效果

    JS实现仿微博可关闭弹出层效果

    本文实例讲述了JS实现仿微博可关闭弹出层效果.分享给大家供大家参考.具体如下: 这里推荐给大家一款真心不错的JavaScript网页弹出层,仿微博JS弹出层可关闭,点击按钮才弹出来,可制作成网页客服之类的,比如在网页的右侧显示这么一个按钮,当点击的时候,展开层,显示客服QQ,效果还是很不错的! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-weibo-close-able-alert-codes/ 具体代码如下: <!DOCTYPE

  • 使用JavaScript实现弹出层效果的简单实例

    使用JavaScript实现弹出层效果的简单实例

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 <!DOCTYPE html> <html> <head> <title>Window对象</title> <meta charset="utf-8"> </head> <body> <a hr

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

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

    本文实例讲述了JS实现可自定义大小,可双击关闭的弹出层效果.分享给大家供大家参考.具体如下: 这是一款JS弹出层,可自定义大小,双击关闭层,可以弹出500,300.500,500大小的窗口,窗口弹出后,在弹出窗口内双击即可关闭鼠标.我觉得挺不错的效果,可以学习到不少的JS知识. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-define-close-able-alert-dlg-demo/ 具体代码如下: <!DOCTYPE html>

  • jQuery实现的自定义弹出层效果实例详解

    jQuery实现的自定义弹出层效果实例详解

    本文实例讲述了jQuery实现的自定义弹出层效果.分享给大家供大家参考,具体如下: dialog.css: #DialogBySHFLayer { width:100%; height:100%; left:0; top:0; position:fixed; z-index:500; background-color:#333333; filter:alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; } /*弹出的提示框*/ #DialogByS

  • JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

    JS实现常见的TAB、弹出层效果(TAB标签，斑马线，遮罩层等)

    本文实例讲述了JS实现常见的TAB.弹出层效果.分享给大家供大家参考.具体如下: 这里演示tab活页夹(网页标签),斑马线,遮罩层.弹出层的简单实现,里面的JS文件,可下拉保存为JS代码调用即可,也可以拷贝在本网页中使用.这个小网页囊括了目前网上流行的风页标签.弹出层以及斑马线效果,很实用啦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-alert-bq-style-demo/ 具体代码如下: <!DOCTYPE html PU

  • JS实现从网页顶部掉下弹出层效果的方法

    JS实现从网页顶部掉下弹出层效果的方法

    本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法.分享给大家供大家参考.具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错. 运行效果如下图所示: 具体代码如下: <HTML><HEAD><TITLE>窗口从上掉下来</TITLE> </HEAD> <BODY bgColor=#fef4d9

  • layer 关闭指定弹出层的例子

    首先,弹出某个层时需要给层取名(赋值),如: var mylay = layer.open({ type: 2, content: 'layer.html', title: false, area: ['500px', '500px'] }); 需要关闭指定的弹出层时,直接: layer.close(mylay) 如果在弹出层中写js,将弹出层自身关闭,可以先获取到弹出层名字,再将其关闭 var mylay = parent.layer.getFrameIndex(window.name); p

  • 微信小程序自定义弹出层效果

    本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下 效果图 WXML <view class='popup' wx:if="{{popShow}}"> <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'> </view> <!-- 弹出层 --> <view class='popup_mai

  • JS实用的动画弹出层效果实例

    JS实用的动画弹出层效果实例

    本文实例讲述了JS实用的动画弹出层效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • JS简单实现动画弹出层效果

    JS简单实现动画弹出层效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>动画弹出层&l

随机推荐