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

鱼C论坛

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

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

[复制链接]
必填的用户名
发表于 2019-6-16 09:54:10 | 显示全部楼层 |阅读模式
3鱼币
我的要求是：点击按钮弹出表单，此时不能再点击任何按钮只能操作表单，但是可以点击空白地方让表单消失
目前进展：我用了两个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%; /*定位*/
}
最佳答案
月排行榜 / 总排行榜
sukiwhip
2019-6-16 09:54:11
<!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>


是这个意思吗？

点击按钮之后

点击按钮之后

点击按钮之前

点击按钮之前

最佳答案

sukiwhip

查看完整内容

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

使用道具 举报

sukiwhip
发表于 2019-6-16 09:54:11 | 显示全部楼层    本楼为最佳答案   
<!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>


是这个意思吗？
想知道小甲鱼最近在做啥？请访问 -> 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-11-25 18:52

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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