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

discuz showWindow() 弹窗样式

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

761

主题

775

帖子

3万

积分

董事

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

积分
32836
发表于 19-3-12 17:50:49 | 显示全部楼层 |阅读模式      紫钻仅向指定用户开放  
showWindow()本身是有遮罩层参数可用的,js生成。  J! s- ?2 V+ Z) j! f, f! G3 k# O! t
这里所述是自用的另外增加的。4 Y: `+ _7 q( L" t% {3 u
3 f; D5 P& z  \$ q" W' A6 S
css代码- K% B  a: {, }) x0 `8 |
    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;}; D9 C1 M- y) a" w/ B' E) J+ Y
    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;}
      " x3 `4 V( d4 B9 P
    3. .Modal-fullPage{width: 688px;}
      : r  r; v$ Q& B$ t/ g
    4. .Modal-inner{overflow: auto;background: #fff;border-radius: 2px;}
      ( d6 K  M7 d9 ^& A
    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;}
    复制代码

    6 v7 a8 p! {3 G8 n

; ~2 U0 S' H$ R- v* d- X

; ]; N/ y; _) Q$ T( [3 ~. V- Y
" E3 x2 g- w. t" w( Jhtml代码
( s* y, t; @8 c: ^- e2 T2 M  B
    1. <div class="Modal-wrapper">
      0 p) ]% H# ]! {3 Q9 t& a
    2.         <div class="Modal-backdrop" onclick="hideWindow('弹窗ID')"></div>3 C' }7 k; z" H& q. E
    3.         <div class="Modal Modal--fullPage">
      ) E' f8 ^  E- }6 M$ n* L3 `" c6 {/ V
    4.                 <div class="Modal-inner">
      ' n# E5 W" s1 l: f7 S
    5. ……弹窗的内容……
      & r) K- B" R# w3 m% ?( `
    6.           </div>+ t8 U: P9 d. G# c; o- K) c, d$ X
    7.         </div>9 D8 Y0 U- i8 s3 L# w$ o; S
    8. </div>
    复制代码

    $ o/ j- A$ Y& A

' ^# a" d/ ^' c1 |0 X7 h: h6 R
- h- n! E4 |+ _5 m- q% b

2 `2 G% B. w7 }8 t% F5 v此代码有两个作用:
# W  [2 g1 y4 w0 k* d8 V. c1.会遮盖掉那一圈的tr、td半透明圆角边框。  t- L; C% D7 z! H# n4 N
2.遮罩层div单独使用,如上面html代码,可以给遮罩层hideWindow(),这样常用的弹窗,点击弹窗窗体之外可以关闭掉弹窗。对于那些比较重要,不希望随意关闭的窗口,可以不给遮罩层hideWindow(),只给关闭按钮。
' n* P" e* f. Z
$ G- A4 C$ Q0 o" A9 g6 x' z* E, O* U( k
网站简介

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