今天测试提了个bug，模态窗口关闭按钮的X太小（其实严重怀疑是测试手指太过粗大............）
言归正传，先上图
如图所示，这个X比较小，对于移动端而言，可能用户老点不到（姑且当点不到吧）。
那么我们的解决方案之一就是扩大点击区域，通过css伪类，使得点击到伪类时候仍能够出发X的点击事件。代码如下：
html
<body>
<div id="outDiv">
<span id="mySpan" onclick="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的点击事件。
扫一扫
2095
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
