Considerations for Styling a Modal
原文地址
modal,dialog,彈出層垂寥，會話框庇楞，指的都是同一個東西步脓，一個彈出來的小盒子告訴你一些重要的東西取视，這個東西有多難呢甥材？嗯绑改，我會說谢床，中等難度。關(guān)于這個東西確實(shí)有一些值得考慮的東西和一些小技巧厘线。
把它放在DOM哪個位置
放在</body>標(biāo)簽之前
<div class="modal" id="modal"></div>
</body>
</html>
這主要是因?yàn)闃邮降脑蚴锻取．?dāng)你以body元素為父元素時，這會使你更容易定位這個modal造壮，也能更好的處理自己內(nèi)部的子元素內(nèi)容渡讼。
居中
我們有一個完全指南關(guān)于css居中
這里是一個技巧能讓你水平垂直都居中一個元素而無需知道它的寬度和高度
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
固定？
注意到我們使用了 position: fixed;,這是因?yàn)槿绻闶褂胊bsolute或其他的話耳璧，用戶向下滾動屏幕成箫，modal就看不到了
處理寬度
在大屏幕上，一個典型的modal不僅僅要居中還要限制寬度
簡單的可適應(yīng)
.modal {
/* 省略的代碼 */
width: 600px;
max-width: 100%;
}
處理高度
.modal {
/* 省略的代碼 */
height: 400px;
max-height: 100%;
}
處理蒙板
一個modal經(jīng)常有一個全屏覆蓋的蒙板旨枯，它能夠
- 它減暗了modal之外的亮度蹬昌，強(qiáng)制讓用戶處理彈出的會話框
- 它能夠用來防止點(diǎn)擊/交互modal之外的的內(nèi)容
- 它能夠被做成一個巨大的關(guān)閉按鈕
典型的處理：
<div class="modal" id="modal">
<!-- modal stuff -->
</div>
<div class="modal-overlay" id="modal-overlay">
</div>
.modal {
/* 已經(jīng)討論過的代碼 */
z-index: 1010;
}
.modal-overlay {
/* 建議:
不需要太過關(guān)注1000數(shù)字，只要它在你的z-index系統(tǒng)中足夠高就可以攀隔，
要比上面的modal部分低皂贩，因?yàn)閙odal是在蒙版之上的
*/
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
用一個class來關(guān)閉(而不是用一個class來打開)
如果是先給modal使用display:none來隱藏它，需要打開時再改變它的display讓它可見昆汹。但這是有問題的明刷，因?yàn)槟阆胍宮odal可見的dispaly可能是flex，blcok满粗，grid等等辈末，這樣是這個closed類不夠通用。但如果先寫出正常的modal的display，然后再用一個display: none;去覆蓋之前的display本冲，打開modal的時候移去這個closed類就可以了，而不需要考慮它打開時是什么display
.modal {
/* for example... */
display: flex;
}
.modal.closed {
display: none;
}
