Javascript弹出层的效果

最新推荐文章于 2023-04-20 23:42:39 发布
最新推荐文章于 2023-04-20 23:42:39 发布
阅读量1k 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangfeng08/article/details/3206425
版权
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head><title>-</title>
  4. <style>
  5. body {
  6. margin:0px
  7. }
  8. #Loading {
  9.   position:absolute;
  10.   z-index:10;
  11.   left:10px;
  12.   top:10px;
  13.   border:1px #666666 solid;
  14.   background:#eeeeee;
  15.   width:10px;
  16.   height:10px
  17. }
  18. </style>
  19. <script LANGUAGE="JavaScript"> 
  20. <!-- 
  21. /**
  22.   *原本方法为$(){
  23.   *            return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);
  24.   *          }
  25.   */
  26. function getdiv(a){
  27.     //return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);//网站上荡的源码
  28.     return document.getElementById(a);//改装后的源码
  29. }
  30. var OverH,OverW,ChangeDesc,ChangeH=20,ChangeW=20;
  31. function OpenDiv(_Dw,_Dh,_Desc) {
  32.    OverH=_Dh;
  33.    OverW=_Dw;
  34.    ChangeDesc=_Desc;
  35.    getdiv("Loading").style.display='';
  36.    //宽>长
  37.    if(_Dw>_Dh){
  38.       ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/20))
  39.    }else if(_Dw<_Dh){//宽<长
  40.       ChangeW=Math.ceil((_Dw-10)/((_Dh-10)/20))
  41.    }
  42.    getdiv("Loading").style.top=(document.documentElement.clientHeight-10)/2+"px";
  43.    getdiv("Loading").style.left=(document.documentElement.clientWidth-10)/2+"px";
  44.    OpenNow()
  45. }
  46. var Nw=10,Nh=10;
  47. function OpenNow() {
  48.    Nw=Nw+ChangeW;
  49.    Nh=Nh+ChangeH;
  50.    if(OverW>Nw||OverH>Nh) {
  51.       if(OverW>Nw) {
  52.          getdiv("Loading").style.width=Nw+"px";
  53.          getdiv("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
  54.       }
  55.       if(OverH>Nh) {
  56.          getdiv("Loading").style.height=Nh+"px";
  57.          getdiv("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
  58.       }
  59.       window.setTimeout("OpenNow()",10)
  60.   }else{
  61.      Nw=10;
  62.      Nh=10;
  63.      ChangeH=20;
  64.      ChangeW=20;
  65.      getdiv("Loading").innerHTML=ChangeDesc;
  66.   }
  67.   }
  68. //-->
  69. </script> 
  70. </head>
  71. <body>
  72. <a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
  73. <a href="javascript:OpenDiv(600,200,'层2<br>双击关闭')">层2 600*200</a><br><br>
  74. <a href="javascript:OpenDiv(200,600,'层3<br>双击关闭')">层3 200*600</a><br><br>
  75. <a href="javascript:OpenDiv(600,600,'层4<br>双击关闭')">层4 600*600</a>
  76. <div id="Loading" style="display:none" οndblclick="this.style.display='none'"></div>
  77. </body>
  78. </html>
jiangfeng08
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript制作弹出层效果
10-20
弹出层效果大家在网站上经常遇到此功能，下面小编给大家分享一段js代码制作弹出层效果，代码简单易懂，非常不错，需要的朋友参考下吧
使用JavaScript实现弹出层效果
a725213的博客
05-31 265
声明 阅读本文需要有一定的HTML、CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单：将待显示的内容先隐藏，在触发某种条件后（如点击按钮），将原本隐藏的内容显示出来。 实现 <!DOCTYPE html> <html> <head> <title>Window对象</tit...
JAVASCRIPT 弹出层
weixin_30609287的博客
07-15 45
tag:Javascript 弹出窗口弹出层 模式对话框 function sAlert(str,time){ var msgw,msgh,bordercolor; msgw=400;//Width msgh=100;//Height titleheight=25 //title Height bordercolor="#336699";//boder color...
分享123个JS特效弹出层，总有一款适合您
zy0412326的专栏
02-06 1235
JS
javascript实现弹出层
babulongbo的博客
08-10 4652
弹出层和弹窗相似但是并不相同；弹窗和弹出层都是由用户触发的显示提示信息的弹出面板；但是弹窗只是显示一些信息，没有太多的复杂的交互事件；而弹层类似一个整个页面，可以实现页面的所有功能； 现在前端弹层使用的很频繁，如支付宝支付弹层等…所以掌握弹层是一个很重要的技能。如果只是简单的隐藏和切换，当然就不必说，我要说的html+animate+es6实现弹层； ; html弹层结构： ...
html 原生弹出框,使用原生JS实现弹出层特效_javascript技巧
weixin_42513944的博客
06-05 611
创建遮罩层代码如下:_createCover: function() {var newMask = document.createElement("div");newMask.id = this._mark;newMask.style.position = "absolute";newMask.style.zIndex = "100";_scrollWidth = Math.max(documen...
javascript实现弹出层效果
10-15
主要为大家详细介绍了javascript实现弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Javascript 弹出层效果
12-28
通过javascript做出的弹出层效果，挺不错的，和大家分享一下，希望大家支持。。。
javascript 弹出层居中效果的制作
10-29
做一个带拖动的弹出层效果(像提示框那种) ,看了下代码与实现效果，值得学习应用。
使用JavaScript实现弹出层效果的简单实例
10-22
下面小编就为大家带来一篇使用JavaScript实现弹出层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js弹出框 javascript弹出框 div+css弹出层效果 弹出登录框
06-10
可选属性: 1.autoSize="true" 让div自适应大小 可选值true false 默认false 2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置属性后,直接调用js方法即可使用,相当方便.
简单精美js弹出层效果
07-16
js弹出层效果，简单精美js弹出层效果—菜鸟的福音
JS实现点击图片放大、关闭效果
qq_25285531的博客
03-01 318
点击图片在弹出层显示大图，点击大图或空白区域关闭大图，图片高度宽度根据窗口大小判断。
html5鼠标点击弹出层,JS实现响应鼠标点击动画渐变弹出层效果代码
weixin_30043999的博客
06-07 401
本文实例讲述了JS实现响应鼠标点击动画渐变弹出层效果。分享给大家供大家参考，具体如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">动画弹出层.list{position:relative;;background:#eee;border:1px #ccc solid;margin:10px;height:30p...
一个实用的JS动画弹出层效果
智慧是做事用的,对于灵魂来说,靠的是信仰
05-22 2598
动画弹出层 .list{ position:relative;; background:#eee; border:1px #ccc solid; margin:10px; height:30px; width:100px; cursor :pointer ; } .listShow{ position:relative; background:#eff; border
js+css实现简单的弹框动画
pscool的博客
04-20 2067
让下次可以继续指定放大的动画的样式类,来展示动画 *//* 用于标记box1是否被打开过, 如果之前被打开过的话, 再次点击打开无效 *//* 元素如果要显示, 必须通过添加该类的方式(约定) *//* 动画完成后, 执行指定的函数 *//* 动画完成后, 移除监听 *//* body占满整个页面 *//* 添加元素显示时的动画 *//* 定义元素放大的动画 *//* 添加让元素显示的类 *//* 定义元素放大的类 *//* 定义元素缩小的类 *//* 元素缩小的动画 *//* 标记打开过 */
js实现弹层
代码的专栏
07-10 572
弹出层效果 html, body {height:100%;} body, h2, p {margin:0px;padding:0px; font-size:12px;} body {font-size:12px; text-align:center; } .alert_backg {width:100%;height:100%;top:0px;left:0px;position:ab
css3+原生js实现toast提示层弹框（淡入淡出动画效果）
codeTnt的博客
07-13 5095
今天无聊，写了一个小插件。利用css3封装了一个toast弹出层。代码如下：&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;toast&lt;/title&gt;
js 实现弹出层效果
weixin_30847939的博客
10-13 325
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js实现弹出层效果</title> <style> #mask { background: black; opacity:0....
点击div实现弹出层效果
最新发布
06-10
可以通过CSS和JavaScript实现点击div弹出层的效果，具体步骤如下： HTML部分： ```html <div id="myDiv">Click me! <p>Hello, world! <button id="close-btn">Close ``` CSS部分： ```css .overlay { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值