showWindow()本身是有遮罩層參數(shù)可用的,，js生成,。
這里所述是自用的另外增加的,。
css
- .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;}
- .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;}
- .Modal-fullPage{width: 688px;}
- .Modal-inner{overflow: auto;background: #fff;border-radius: 2px;}
- .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;}
html
- <div class="Modal-wrapper">
- <div class="Modal-backdrop" onclick="hideWindow('彈窗ID')"></div>
- <div class="Modal Modal--fullPage">
- <div class="Modal-inner">
- ……彈窗的內(nèi)容……
- </div>
- </div>
- </div>
此代碼有兩個作用：
1.會遮蓋掉那一圈的tr,、td半透明圓角邊框,。
2.遮罩層div單獨(dú)使用,，如上面html代碼，可以給遮罩層hideWindow(),，這樣常用的彈窗,，點(diǎn)擊彈窗窗體之外可以關(guān)閉掉彈窗。對于那些比較重要,，不希望隨意關(guān)閉的窗口,，可以不給遮罩層hideWindow()，只給關(guān)閉按鈕,。
|
