discuzshowWindow()弹窗样式

2024年4月2日发(作者：)

discuzshowWindow（）弹窗样式

showWindow()本身是有遮罩层参数可用的，js生成。

这里所述是自用的另外增加的。

css

1. .Modal{position:

box;display:

relative;z-index: 1;display: -webkit-

-ms-flexbox;display: flex;-webkit-box-orient:

normal;-ms-flex-direction:

400px;max-height:

vertical;-webkit-box-direction:

column;flex-direction: column;width:

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;}

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;}

3. .Modal-fullPage{width: 688px;}

4. .Modal-inner{overflow:

radius: 2px;}

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;}

auto;background: #fff;border-

复制代码

html

1.

复制代码

此代码有两个作用：

1.会遮盖掉那一圈的tr、td半透明圆角边框。

2.遮罩层div单独使用，如上面html代码，可以给遮罩层

hideWindow()，这样常用的弹窗，点击弹窗窗体之外可以关闭掉弹窗。

对于那些比较重要，不希望随意关闭的窗口，可以不给遮罩层

hideWindow()，只给关闭按钮。