<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档碎片</title>
<script src = "jquery-1.11.0.min.js"></script>
</head>
<style>
.bg,form{
display: none;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 100%;
z-index: 2;
background-color: #000;
opacity: 0.5;
}
form{
position: absolute;
left: 50%;
top: 50%;
z-index: 99;
width: 472px;
height: 400px;
margin-left: -236px;
margin-top: -200px;
background-color: #fff;
}
</style>
<body>
<button id = "click">click</button>
<div class = "bg"></div>
<form name="testform" action="#" id="form">
What is your name?<br />
<input type="text" name="fname" />
<input type="text" name="fname2" />
<button type="submit" value="Submit">提交</button>
</form>
</body>
<script type="text/javascript">
$("#click").on("click",function(){
$(".bg").css("display","block");
$("form").css("display","block");
})
var form = document.getElementById('form');
form.onsubmit = function(){
if(($("input[name = 'fname']").val() == "aa") && ($("input[name = 'fname2']").val() == "bb")){
alert("提交成功！");
return true;
}else{
alert("提交失败！");
return false;
}
}
</script>
</html>
