今天測試提了個bug，模態窗口關閉按鈕的X太小（其實嚴重懷疑是測試手指太過粗大............）
言歸正傳，先上圖
如圖所示，這個X比較小，對於移動端而言，可能用戶老點不到（姑且當點不到吧）。
那麼我們的解決方案之一就是擴大點擊區域，通過css僞類，使得點擊到僞類時候仍能夠出發X的點擊事件。代碼如下：
html
<body>
<div id="outDiv">
<span id="mySpan" οnclick="changeBgc()">×</span>
</div>
</body>css
<style>
*{
margin: 0;
padding: 0;
}
#outDiv{
margin: auto;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width : 10rem;
height: 10rem;
background: cyan;
text-align: right;
}
#mySpan{
display: inline-block;
}
#outDiv:before{
content: "";
display: inline-block;
height : 1.3rem;
width : .7rem;
}
</style>javascript
function changeBgc(){
document.getElementById("outDiv").style.backgroundColor = "yellow";
}當然其他都是配菜，只要關注如下代碼就行：
#outDiv:before{
content: "";
display: inline-block;
height : 1.3rem;
width : .7rem;
}然後附上實現後的圖
寬度長度可以自己調節，after同理。這樣點擊僞類區域同樣能夠觸發X的點擊事件。
