Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

【实测】html实现弹窗 DIV+CSS弹窗代码

[复制链接]
tuyuanma 发表于 2020-5-7 19:24:36 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


用html及原生js写个弹窗,供参考
' Z8 u6 _/ u7 r, }6 B1 D" d0 W% v
  1. <!DOCTYPE html>
    : D5 L$ K( q! g& R' G: v* |
  2. <html>
    & r/ e; s$ n( s
  3.         <head>4 M; ?. o u4 W3 k- F, I8 e
  4.                 <meta charset="utf-8" />* k  @# \& a% q0 x  J# t- b) L1 j q
  5.                 <title>【实测】html实现弹窗 DIV CSS弹窗代码</title>$ q3 `1 g, Q. k, Q/ ?: d9 H/ |
  6. <style type="text/css">
    7 x) Y4 ]( Y5 | l% e' L  W7 P
  7. body{ margin: 0px; }
    ?  ^  A6 ]3 J$ B3 n. F/ U$ a
  8. .zhezhao{ position: fixed; left: 0px; top: 0px; background: #000; width: 100%; height: 100%; opacity: 0.5; }8 [8 O- @3 M5 \- ?3 n
  9. .tankuang{ position: relative; background: #fff; width: 50%; height: 80%; border-radius: 5px; margin: 5% auto; }* z0 O% E; V- ^( F# A, b. N, w
  10. #header{ height: 40px; }
    6 d2 P( I9 c- Y$ @ ]# X
  11. #header-right{ position: absolute; width: 25px; height: 25px; border-radius: 5px; background: red; color: #fff; right: 5px; top: 5px; text-align: center; }; @3 H) B$ _, Z7 Y3 ~( |* l: S
  12. </style>2 m" n% y6 @  W9 n
  13.         </head>
    / y5 a9 t& i" p  p
  14.         <body>
    ) x4 ]( ^5 p6 A% u
  15.                 <button type="button" onclick="dianwo()">点我</button># v: u( v9 w& t2 X4 c- }
  16.                 <div class="zhezhao" id='zhezhao'>
    ]7 ] [; D) f. i
  17.                         <div class="tankuang">% v: x- C5 q& J" f8 o
  18.                                 <div id="header">7 K' j, f" e, C8 D$ a2 K( W0 I I5 B k3 j
  19.                                         <span>我是弹窗</span>
    $ K# J: B1 s/ g5 O' ^
  20.                                         <div id="header-right" onclick="hidder()">x</div>
    0 w/ x3 X2 X! p6 v, f( S' Z
  21.                                 </div>
    5 ?9 `& k; m3 [: i l1 f, n& f; k
  22.                         </div>3 d' A9 s- _1 P$ B6 {7 ]% E" k1 |
  23.                 </div>  Q. _* C& a$ v. i2 n! y/ C, S: E" p
  24.                 <script type="text/javascript">
      I/ F" q2 h8 X
  25.                         document.getElementById('zhezhao').style.display="none";
    9 M6 T }: V) |; k, Z
  26.                         function dianwo(){& Z0 r' r J3 [4 b6 X& \) e9 u
  27.                                 document.getElementById('zhezhao').style.display="";/ g  A3 Q/ {, Q. \. Q9 H  M5 f
  28.                         }3 T0 v6 D6 Z3 [% F! v t' Z
  29.                         function hidder(){3 N/ N- I6 |! ~, {4 b
  30.                                 document.getElementById('zhezhao').style.display="none";
    2 H0 t T* Y  a* w0 t# I
  31.                         }
    ; O- \/ d, ]( E! |- ^3 i3 R5 l
  32.                 </script>6 J- h! y O# y0 H' N
  33.         </body>& N1 [' ]/ R. h3 C5 ^$ m
  34. </html>
复制代码
代码可直接拿来用,不足请指出。

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 (公网安备36112102000036号 赣ICP备17001544号)

兔源码 QQ交流群:493651246  GMT+8, 2020-5-31 00:19
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表