设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 如何使用js实现点击空白地方消失弹窗
返回列表 发新帖
查看: 3335|回复: 2

[已解决]如何使用js实现点击空白地方消失弹窗

[复制链接]
必填的用户名
发表于 2019-6-16 09:54:10 | 显示全部楼层 |阅读模式
3鱼币
我的要求是：点击按钮弹出表单，此时不能再点击任何按钮只能操作表单，但是可以点击空白地方让表单消失
目前进展：我用了两个div，一个div用于弹出表单，另一个div进行覆盖让鼠标不能点击其他地方
问题：不知道怎么实现点击表单之外的地方让这两个div消失从而可以再次点击其他功能按钮
  1. jsp代码：
  2. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5.   <head>
  6.     <title>My JSP 'MyJsp.jsp' starting page</title>
  7.         <link rel="stylesheet" type="text/css" href="css/test.css">
  8.          <script type="text/javascript" src="js/left_menu.js"></script>
  9.   </head>
  10.   <body>
  11.   <input type="button" onclick="borrowbook()" id="leftmenu1" value="借阅图书"><br>     
  12.   <input type="button" onclick="borrowbook()" id="leftmenu1" value="归还图书"><br>     
  13.    <div id="borrowbook">
  14.             <div style="width:500px;height:40px;">
  15.                 <hr>
  16.                 <form action="operbook.do" style="margin-left: 50px;" method="post" onsubmit="return operbookTest();">
  17.                           <input type="hidden" name="oper" value="借阅">
  18.                             请输入所借阅书籍的编号<input type="text" name="bid" id="operbid"><br>
  19.                             请输入所借阅书籍的书名<input type="text" name="bname" id="operbname"><br>
  20.                             请输入你想要借阅的本数<input type="text" name="bcount" id="operbcount"><br>
  21.                             <input type="submit" value="确定">       
  22.                             <input type="reset" value="重填">       
  23.                 </form>
  24.             </div>
  25.         </div>
  26.         <div id="borrowbook_light">
  27.         </div>
  28.   </body>
  29. </html>
  30. js代码：
  31. function borrowbook() {
  32.     var t1 = document.getElementById('borrowbook_light');
  33.     var t2 = document.getElementById('borrowbook');
  34.     t1.style.display = 'block';
  35.     t2.style.display = 'block';
  36. }
  37. css代码：
  38. @CHARSET "UTF-8";
  39. #borrowbook_light{ /*整个弹窗的页面*/
  40.     opacity: 0.8; /*透明度*/
  41.     width: 100%; /*宽度*/
  42.     height: 100%; /*高度，不能百分百*/
  43.     background: #000; /*背景色*/
  44.     position: absolute;
  45.     top: 0;
  46.     left: 0; /*定位*/
  47.     display: none; /*隐藏*/
  48.     z-index: 12; /*覆盖*/
  49. }
  50. #borrowbook{ /* 弹框的页面*/
  51.         width: 500px; /*宽度*/
  52.         height: 500px; /*高度*/
  53.         background: #fff; /*背景色*/
  54.         display: none; /*隐藏*/
  55.         z-index: 13; /*覆盖*/
  56.         position: absolute;
  57.         top: 100px;
  58.         left: 34%; /*定位*/
  59. }
复制代码
最佳答案
月排行榜 / 总排行榜
sukiwhip
2019-6-16 09:54:11
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <title>My JSP 'MyJsp.jsp' starting page</title>
  6.     <!-- <link rel="stylesheet" type="text/css" href="css/test.css">
  7.     <script type="text/javascript" src="js/left_menu.js"></script> -->
  8.     <style>
  9.         #borrowbook_light {
  10.             /*整个弹窗的页面*/
  11.             opacity: 0.8;
  12.             /*透明度*/
  13.             width: 100%;
  14.             /*宽度*/
  15.             height: 100%;
  16.             /*高度，不能百分百*/
  17.             background: #000;
  18.             /*背景色*/
  19.             position: absolute;
  20.             top: 0;
  21.             left: 0;
  22.             /*定位*/
  23.             display: none;
  24.             /*隐藏*/
  25.             z-index: 12;
  26.             /*覆盖*/
  27.         }
  28.         
  29.         #borrowbook {
  30.             /* 弹框的页面*/
  31.             width: 500px;
  32.             /*宽度*/
  33.             height: 500px;
  34.             /*高度*/
  35.             background: #fff;
  36.             /*背景色*/
  37.             display: none;
  38.             /*隐藏*/
  39.             z-index: 13;
  40.             /*覆盖*/
  41.             position: absolute;
  42.             top: 100px;
  43.             left: 34%;
  44.             /*定位*/
  45.         }
  46.     </style>
  47. </head>

  49. <body>
  50.     <input type="button" onclick="borrowbook()" id="leftmenu1" value="借阅图书"><br>
  51.     <input type="button" onclick="borrowbook()" id="leftmenu1" value="归还图书"><br>
  52.     <div id="borrowbook">
  53.         <div style="width:500px;height:40px;">
  54.             <hr>
  55.             <form action="operbook.do" style="margin-left: 50px;" method="post" onsubmit="return operbookTest();">
  56.                 <input type="hidden" name="oper" value="借阅"> 请输入所借阅书籍的编号
  57.                 <input type="text" name="bid" id="operbid"><br> 请输入所借阅书籍的书名
  58.                 <input type="text" name="bname" id="operbname"><br> 请输入你想要借阅的本数
  59.                 <input type="text" name="bcount" id="operbcount"><br>
  60.                 <input type="submit" value="确定">
  61.                 <input type="reset" value="重填">
  62.             </form>
  63.         </div>
  64.     </div>
  65.     <div id="borrowbook_light" onclick="hiddenLight()">
  66.     </div>
  67.     <script>
  68.         var t1 = document.getElementById('borrowbook_light');
  69.         var t2 = document.getElementById('borrowbook');

  71.         function borrowbook() {
  72.             t1.style.display = 'block';
  73.             t2.style.display = 'block';
  74.         }

  76.         function hiddenLight() {
  77.             t1.style.display = 'none';
  78.             t2.style.display = 'none';
  79.         }
  80.     </script>
  81. </body>

  83. </html>
复制代码



是这个意思吗？

点击按钮之后

点击按钮之后

点击按钮之前

点击按钮之前

最佳答案

sukiwhip

查看完整内容

是这个意思吗？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

sukiwhip
发表于 2019-6-16 09:54:11 | 显示全部楼层    本楼为最佳答案   
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <title>My JSP 'MyJsp.jsp' starting page</title>
  6.     <!-- <link rel="stylesheet" type="text/css" href="css/test.css">
  7.     <script type="text/javascript" src="js/left_menu.js"></script> -->
  8.     <style>
  9.         #borrowbook_light {
  10.             /*整个弹窗的页面*/
  11.             opacity: 0.8;
  12.             /*透明度*/
  13.             width: 100%;
  14.             /*宽度*/
  15.             height: 100%;
  16.             /*高度，不能百分百*/
  17.             background: #000;
  18.             /*背景色*/
  19.             position: absolute;
  20.             top: 0;
  21.             left: 0;
  22.             /*定位*/
  23.             display: none;
  24.             /*隐藏*/
  25.             z-index: 12;
  26.             /*覆盖*/
  27.         }
  28.         
  29.         #borrowbook {
  30.             /* 弹框的页面*/
  31.             width: 500px;
  32.             /*宽度*/
  33.             height: 500px;
  34.             /*高度*/
  35.             background: #fff;
  36.             /*背景色*/
  37.             display: none;
  38.             /*隐藏*/
  39.             z-index: 13;
  40.             /*覆盖*/
  41.             position: absolute;
  42.             top: 100px;
  43.             left: 34%;
  44.             /*定位*/
  45.         }
  46.     </style>
  47. </head>

  49. <body>
  50.     <input type="button" onclick="borrowbook()" id="leftmenu1" value="借阅图书"><br>
  51.     <input type="button" onclick="borrowbook()" id="leftmenu1" value="归还图书"><br>
  52.     <div id="borrowbook">
  53.         <div style="width:500px;height:40px;">
  54.             <hr>
  55.             <form action="operbook.do" style="margin-left: 50px;" method="post" onsubmit="return operbookTest();">
  56.                 <input type="hidden" name="oper" value="借阅"> 请输入所借阅书籍的编号
  57.                 <input type="text" name="bid" id="operbid"><br> 请输入所借阅书籍的书名
  58.                 <input type="text" name="bname" id="operbname"><br> 请输入你想要借阅的本数
  59.                 <input type="text" name="bcount" id="operbcount"><br>
  60.                 <input type="submit" value="确定">
  61.                 <input type="reset" value="重填">
  62.             </form>
  63.         </div>
  64.     </div>
  65.     <div id="borrowbook_light" onclick="hiddenLight()">
  66.     </div>
  67.     <script>
  68.         var t1 = document.getElementById('borrowbook_light');
  69.         var t2 = document.getElementById('borrowbook');

  71.         function borrowbook() {
  72.             t1.style.display = 'block';
  73.             t2.style.display = 'block';
  74.         }

  76.         function hiddenLight() {
  77.             t1.style.display = 'none';
  78.             t2.style.display = 'none';
  79.         }
  80.     </script>
  81. </body>

  83. </html>
复制代码



是这个意思吗？
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

wongyusing
发表于 2019-6-18 22:46:43 | 显示全部楼层
你这里想实现类似bootstr4的modal组件的功能？？
最简单方案就是套入bootstrap4

如果不套用，想自己写的话，可以尝试这样
把黑色部分设置一个方法。  
当有点击事件的话，就把表单显示隐藏。  
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-25 12:46

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表