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() })