共计 891 个字符,预计需要花费 3 分钟才能阅读完成。
HTML
<div class="alertmes">
<div class="am-wrapper">
<div class="am-mes"> 提示语 </div>
<div class="am-btn">
<input type="button" value="确定" class="btn am-confirm-btn"/>
<input type="button" value="取消" class="btn am-cancel-btn"/>
</div>
</div>
</div>
SCSS
/*alertmes*/
.alertmes{
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
display: none;
.am-wrapper{
width: 90%;
margin: 200px auto 0;
max-width: 400px;
padding: 20px;
box-sizing: border-box;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 0 5px #ddd;
.am-mes{margin: 10px 0 30px;}
.am-btn{
text-align: right;
input.btn{
border: none;
padding: 5px 10px;
background-color: #b40605;
color: #fff;
border-radius: 4px;
outline: none;
&.am-cancel-btn{background-color: #ddd;}
}
}
}
}
js
// 蒙层确认按钮按钮
$(".am-confirm-btn").click(function(){
// 蒙层关闭以及做相应提交
$(".alertmes").hide()})
// 蒙层取消按钮按钮
$(".am-cancel-btn").click(function(){$(".alertmes").hide()})
正文完
发表至: javascript
2019-04-29