腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

discuz showWindow() 弹窗样式

0
回复
1298
查看
[复制链接]

765

主题

779

帖子

3万

积分

董事

Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72Rank: 72

积分
33029
发表于 19-3-12 17:50:49 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
showWindow()本身是有遮罩层参数可用的,js生成。
1 T6 {# x3 W& u/ w4 b这里所述是自用的另外增加的。" ^, H2 j3 ]8 O4 D) M

, v7 r' w% \+ G$ K5 j3 ]css代码
' g# K* M2 O, \5 `9 X7 [
    1. .Modal{position: relative;z-index: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;width: 400px;max-height: calc(100vh - 48px);margin-right: auto;margin-left: auto;outline: 0;-webkit-box-shadow: 0 5px 20px 0 rgba(0,34,77,.5);box-shadow: 0 5px 20px 0 rgba(0,34,77,.5);-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: max-height .8s ease;transition: max-height .8s ease;}
      $ D0 J$ O4 _. z$ |1 f( ]% m
    2. .Modal-wrapper{position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 203; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow-x: hidden; overflow-y: auto; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out;}' I* v4 W# Z+ T! q5 s2 q% F
    3. .Modal-fullPage{width: 688px;}, {5 H; R, K1 w  ?# O. c- M, i
    4. .Modal-inner{overflow: auto;background: #fff;border-radius: 2px;}
      % l" J5 v/ c- }! b
    5. .Modal-backdrop{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-color: rgba(0,0,0,.65); -webkit-transition: background-color .3s ease-out; transition: background-color .3s ease-out;}
    复制代码
    : o* }5 w# h- m) y% G3 ^9 l4 b
; y" {- i* R- f, }( G; c& g+ ]

8 J" C: ~! w  e1 p7 h; T
. y" u$ L( V* U( m7 E8 ihtml代码
9 r4 _1 L# m' d% ^& N
    1. <div class="Modal-wrapper">! k8 v5 y8 l& Y
    2.         <div class="Modal-backdrop" onclick="hideWindow('弹窗ID')"></div>
        E, ?: r; @# s
    3.         <div class="Modal Modal--fullPage">
      & w! }6 R# h% i7 w, J! i6 a# x4 W% ?
    4.                 <div class="Modal-inner">/ V3 r4 d) z6 u0 L9 J5 V. L
    5. ……弹窗的内容……
      6 X, Y" w/ z# E
    6.           </div>
      ' E; q6 W( k% P; I% m
    7.         </div>
      " |# c4 R8 q% R  K
    8. </div>
    复制代码

    ; y7 G% j2 c7 t0 s, V- D3 p

8 d$ I5 B3 M% `
- U/ n1 l+ j: N* r, I
/ @4 z! \! w+ ^
此代码有两个作用:
) S1 A# a3 ]8 w: m3 B1.会遮盖掉那一圈的tr、td半透明圆角边框。
) E# f3 F: _, I2.遮罩层div单独使用,如上面html代码,可以给遮罩层hideWindow(),这样常用的弹窗,点击弹窗窗体之外可以关闭掉弹窗。对于那些比较重要,不希望随意关闭的窗口,可以不给遮罩层hideWindow(),只给关闭按钮。
: L+ ]8 _) L. Y+ L2 ^

, g8 F9 w0 K1 p) M- g8 r2 g
网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除