頁面彈窗組成:蒙版 + 彈窗
主要使用的 css 屬性:position
、z-index
彈窗出現之後,要求底部內容不滾動,一般可以通過設定body
的overflow: hidden;
實現,但是在不同手機系統或一些瀏覽器(如uc)中,該方法無效;所以最後採用 設定body
的position: fixed;
的方法。
html部分
class
="popup"
id="popup"
>
class
="cover"
>
div>
class
="modal"
>
class
="modal-con"
>
class
="btn-close"
id="btnclose"
>
關閉div
>
class
="modal-cont"
>
>
彈窗的標題h2
>
>
彈窗的內容彈窗的內容彈窗的內容彈窗的內容彈窗的內容p
>
div>
div>
div>
div>
css部分/* 蒙版 */
.cover
/* 彈窗 */
.modal
.btn-close
.modal-con
.modal-cont
.modal-cont h2
.modal-cont p
js部分;(
function
(document, window))}
)(document, window)
<
/script>
WPF蒙板彈窗
先看一下效果。原理其實很簡單,啟動專案的時候,先在主窗體最根部的grid 新增乙個控制項,設定好顏色和透明度,隱藏 在這裡我用的stack panel,具體什麼都沒影響。黑色背景0.4透明度剛好呈現蒙板效果。需要蒙板彈窗的時候,呼叫方法 public static void showdialog w...
蒙層底部不動 z index失效
開啟蒙層時新增 body css 關閉蒙層時新增 body css 監聽滾動條到頁面頂部的距離 scrolltobottom 頁面新增監聽滾動事件 window.addeventlistener scroll this scrolltobottom.bind this 蒙層出現時 body css ...
android 漸變蒙版 iOS關於蒙版漸變的實現
有個需求,檢視的右邊需要漸隱,如下圖 這裡只是隨便拿個介面做下測試 paste image.png 要求整個view漸漸alpha變透明,包括view上的子view,需要一起變透明。拿起鍵盤就是幹 void testalpha self.view layoutifneeded uicolor col...