如何使用js实现点击空白地方消失弹窗
我的要求是：点击按钮弹出表单，此时不能再点击任何按钮只能操作表单，但是可以点击空白地方让表单消失目前进展：我用了两个div，一个div用于弹出表单，另一个div进行覆盖让鼠标不能点击其他地方
问题：不知道怎么实现点击表单之外的地方让这两个div消失从而可以再次点击其他功能按钮
jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'MyJsp.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/left_menu.js"></script>
</head>
<body>
<input type="button" onclick="borrowbook()" id="leftmenu1" value="借阅图书"><br>
<input type="button" onclick="borrowbook()" id="leftmenu1" value="归还图书"><br>
<div id="borrowbook">
<div style="width:500px;height:40px;">
<hr>
<form action="operbook.do" style="margin-left: 50px;" method="post" onsubmit="return operbookTest();">
<input type="hidden" name="oper" value="借阅">
请输入所借阅书籍的编号<input type="text" name="bid" id="operbid"><br>
请输入所借阅书籍的书名<input type="text" name="bname" id="operbname"><br>
请输入你想要借阅的本数<input type="text" name="bcount" id="operbcount"><br>
<input type="submit" value="确定">
<input type="reset" value="重填">
</form>
</div>
</div>
<div id="borrowbook_light">
</div>
</body>
</html>
js代码：
function borrowbook() {
var t1 = document.getElementById('borrowbook_light');
var t2 = document.getElementById('borrowbook');
t1.style.display = 'block';
t2.style.display = 'block';
}
css代码：
@CHARSET "UTF-8";
#borrowbook_light{ /*整个弹窗的页面*/
opacity: 0.8; /*透明度*/
width: 100%; /*宽度*/
height: 100%; /*高度，不能百分百*/
background: #000; /*背景色*/
position: absolute;
top: 0;
left: 0; /*定位*/
display: none; /*隐藏*/
z-index: 12; /*覆盖*/
}
#borrowbook{ /* 弹框的页面*/
width: 500px; /*宽度*/
height: 500px; /*高度*/
background: #fff; /*背景色*/
display: none; /*隐藏*/
z-index: 13; /*覆盖*/
position: absolute;
top: 100px;
left: 34%; /*定位*/
} <!DOCTYPE html>
<html>
<head>
<title>My JSP 'MyJsp.jsp' starting page</title>
<!-- <link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/left_menu.js"></script> -->
<style>
#borrowbook_light {
/*整个弹窗的页面*/
opacity: 0.8;
/*透明度*/
width: 100%;
/*宽度*/
height: 100%;
/*高度，不能百分百*/
background: #000;
/*背景色*/
position: absolute;
top: 0;
left: 0;
/*定位*/
display: none;
/*隐藏*/
z-index: 12;
/*覆盖*/
}
#borrowbook {
/* 弹框的页面*/
width: 500px;
/*宽度*/
height: 500px;
/*高度*/
background: #fff;
/*背景色*/
display: none;
/*隐藏*/
z-index: 13;
/*覆盖*/
position: absolute;
top: 100px;
left: 34%;
/*定位*/
}
</style>
</head>
<body>
<input type="button" onclick="borrowbook()" id="leftmenu1" value="借阅图书"><br>
<input type="button" onclick="borrowbook()" id="leftmenu1" value="归还图书"><br>
<div id="borrowbook">
<div style="width:500px;height:40px;">
<hr>
<form action="operbook.do" style="margin-left: 50px;" method="post" onsubmit="return operbookTest();">
<input type="hidden" name="oper" value="借阅"> 请输入所借阅书籍的编号
<input type="text" name="bid" id="operbid"><br> 请输入所借阅书籍的书名
<input type="text" name="bname" id="operbname"><br> 请输入你想要借阅的本数
<input type="text" name="bcount" id="operbcount"><br>
<input type="submit" value="确定">
<input type="reset" value="重填">
</form>
</div>
</div>
<div id="borrowbook_light" onclick="hiddenLight()">
</div>
<script>
var t1 = document.getElementById('borrowbook_light');
var t2 = document.getElementById('borrowbook');
function borrowbook() {
t1.style.display = 'block';
t2.style.display = 'block';
}
function hiddenLight() {
t1.style.display = 'none';
t2.style.display = 'none';
}
</script>
</body>
</html>
是这个意思吗？ 你这里想实现类似bootstr4的modal组件的功能？？
最简单方案就是套入bootstrap4
如果不套用，想自己写的话，可以尝试这样
把黑色部分设置一个方法。
当有点击事件的话，就把表单显示隐藏。
页:
[1]