HTML代码：
<input type="button" class="delete_btn" value="删 除" />
<div class="shade"></div> <div class="warning"> <div class="warn_titel">警 告</div> <div class="warn_context"> 您确定要删除吗？删除后，将不可恢复，请慎重！！！ </div> <div class="warn_btn"> <div class="warn_btn_t">确 定</div> <div class="warn_btn_f">取 消</div> </div> </div>CSS:
/*删除按钮*/
.delete_btn { position: absolute; width: 100px; height: 30px; cursor: pointer;}/*半透明遮罩*/.shade { position: fixed; width: 100%; height: 100%; background-color: black; opacity: 0.4; z-index: 2; display: none;}/*警告框*/.warning { position: fixed; width: 400px; top: 150px; margin: auto; background-color: white; left: 50%; top: 50%; margin-left: -200px; margin-top: -135px; z-index: 3; display: none;}/*警告框标题*/.warn_titel { position: relative; width: 100%; height: 60px; color: red; font-size: 28px; line-height: 60px; text-align: center;}/*警告框内容*/.warn_context { position: relative; width: 70%; left: 15%; min-height: 100px; font-size: 18px; text-indent: 30px;}/*警告框按钮*/.warn_btn { position: relative; width: 100%; height: 50px;}/*警告框确定按钮*/.warn_btn_t { position: absolute; width: 25%; left: 15%; height: 30px; background-color: #79cdcd; color: white; cursor: pointer; text-align: center; line-height: 30px;}/*警告框取消按钮*/.warn_btn_f { position: absolute; width: 25%; right: 15%; height: 30px; background-color: #808080; color: white; cursor: pointer; text-align: center; line-height: 30px;}JS:
//按钮动画颜色
$(".warn_btn_t").hover(function () { $(this).stop().animate({ "background-color": "red" }, 500);}, function () { $(this).stop().animate({ "background-color": "#79cdcd" }, 500);});$(".warn_btn_f").hover(function () {
$(this).stop().animate({ "background-color": "red" }, 500);}, function () { $(this).stop().animate({ "background-color": "#808080" }, 500);}); //删除按钮弹出提示框$(".delete_btn").click(function () { $(".shade").fadeIn(200); $(".warning").fadeIn(400);});//警告确定按钮
$(".warn_btn_t").click(function () { $(".warning").fadeOut(200); $(".shade").fadeOut(400); //删除按钮功能});//警告取消按钮$(".warn_btn_f").click(function () { $(".warning").fadeOut(200); $(".shade").fadeOut(400); //不删除功能});
效果展示：
