通过jquery实现覆盖全屏的警告框

来源：互联网发布：安卓知乎输入法编辑：程序博客网时间：2024/06/06 00:13

效果：点击“提交”弹出警告框，然后单击警告框任意位置，警告框消失。

代码和效果如下

<!DOCTYPE html><html><head><meta charset="utf-8"><title>登录</title><link rel="stylesheet" href="../CSS/bootstrap.min.css" /><style>.form-control {margin-top: 15px;}.btn-default {margin-top: 15px;}.alert {width: 300px;margin: 20% auto;opacity: 5;z-index: 4;}.mask{position: absolute;left: 0px;top: 0px;height: 100%;width: 100%;z-index: 3;background: rgba(63,63,63,0.6);display: none;}</style></head><body><form name="loginForm"><div class="container"><div class="input-group col-md-6 col-md-offset-3"><input type="text" id="input_user_id" class="form-control" placeholder="Username" /><input type="text" id="input_passwd" class="form-control" placeholder="Password" /><button type="button" id="btn_submit" class="btn btn-default">提交</button></div></div></form></body><div class="mask"></div><script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="../js/bootstrap.min.js"></script><script type="text/javascript">$("#input_user_id").keydown(function(e) {if (e.which == 13) {$("#input_passwd").focus();}});$("#btn_submit").click(function(){$(".mask").append("<div class='alert alert-warning'>\<a href='#' class='close' data-dismiss='alert'>\</a>\<strong>警告！</strong>输入账号密码有误！\</div>");$(".mask").toggle();});$(".mask").click(function(){$(".mask").toggle();$("div.alert").remove();})/*$.ajax({url : "/demo/user/login",type : "POST",data : {"username" : "userpw" : },dataType : "json",success : function(data,textStatus){if(data.code === "501"){} else if(data.code === "502"){} else if(data.code === "503"){} else if(data.code === "200"){ // success}}});*/</script></html>

提醒一点：在点击mask令警告框消失时需要remove之前append的内容，否则会重复累加。

$(".mask").click(function(){$(".mask").toggle();<strong>$("div.alert").remove();</strong>})

0 0