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

discuz showWindow() 弹窗样式

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

763

主题

777

帖子

3万

积分

董事

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

积分
32946
发表于 19-3-12 17:50:49 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
showWindow()本身是有遮罩层参数可用的,js生成。
' ~0 }9 a- t- i0 L1 J: B这里所述是自用的另外增加的。
- {* x* [, J2 y. z- z# h3 J. O5 L: ~* t) _5 V
css代码
8 N' n5 b* E; }
    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;}
      1 c! `9 T" p& z; g* L
    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;}
      % e( i6 T- M$ S9 r4 \
    3. .Modal-fullPage{width: 688px;}
      9 Y# m$ T9 O: h5 B  |
    4. .Modal-inner{overflow: auto;background: #fff;border-radius: 2px;}
      / B" l  _" y4 j) g# e* N
    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;}
    复制代码
    & h! E1 J% S& m$ A- g
$ k' F$ G0 `7 h, a5 p
# w5 y; A/ v+ t) l0 D" P# Z6 j, r
; r) T1 p( X( N% U$ m
html代码
5 _( n7 [2 b8 Y9 \$ ~4 N# p' X' ~
    1. <div class="Modal-wrapper">
      ' u6 }$ C) ^+ Q) u! _% C
    2.         <div class="Modal-backdrop" onclick="hideWindow('弹窗ID')"></div>
      3 B" M$ s2 O  h1 N& ^- W/ Y
    3.         <div class="Modal Modal--fullPage">
      3 r9 I/ a, B1 g' Y- S$ D4 Z7 h& z
    4.                 <div class="Modal-inner">
      5 r8 _0 m' d( i
    5. ……弹窗的内容……
      ( o  m4 M6 R4 H; U1 ?5 i
    6.           </div>
      , ]) i- O0 u; W1 B0 q
    7.         </div>
      4 E1 o+ I# A* A) @, |9 o7 e/ {8 q
    8. </div>
    复制代码

    " C7 V9 d! W/ N0 ?/ R) `7 y% p4 k. c5 b3 q

8 u8 @- z( c2 o, B8 b7 g) }: [! l

1 v0 Z$ {) w; }6 s0 H
& I& Y2 _0 X- m1 d, w# a此代码有两个作用:, I+ S3 w! i9 A& [
1.会遮盖掉那一圈的tr、td半透明圆角边框。9 h& X! ?6 W( ^/ A- Z/ n( c
2.遮罩层div单独使用,如上面html代码,可以给遮罩层hideWindow(),这样常用的弹窗,点击弹窗窗体之外可以关闭掉弹窗。对于那些比较重要,不希望随意关闭的窗口,可以不给遮罩层hideWindow(),只给关闭按钮。

4 S  r/ ^; g( s" S$ t& ]
! `0 ~" G7 l/ [: w, X, F5 _# C
网站简介

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