javascript html css 点击提交按钮弹出透明层

最新推荐文章于 2021-06-07 13:01:10 发布

qt880909

最新推荐文章于 2021-06-07 13:01:10 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/qt880909/article/details/17755267

版权

<html>
<head>
<title>点击提交按钮弹出透明层</title>
<style>
#one {
   border:1px solid black;
}
#two {
display:none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 5;
background-color: black;
opacity: 0.4;
}
#two form {
   color:black;
   width:300px;
   border:7px solid black;
   margin:0 auto;
   margin-top:10em;
   box-shadow: 0 0 5px #333;
   background: white;
   -webkit-box-shadow: 0 0 5px #333;

}
</style>
<script>
function but() { //给submit绑定点击事件
   var b = document.getElementById("two"); //获取透明层
   b.style.display = "block"; //点击提交显示透明层
}

</script>
</head>
<body>
<div id="one">
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
   <input id="but" type="submit" value="提交" οnclick="but()"/></br>
</div>
<div id="two">
   <form>
       用户名<br/><input type="text" name="username" /><br/>
       密码<br/><input type="password" name="username" /><br/>
           <input type="submit" value="提交"/></br>
   </form>
</div>
</body>
</html>