在边界外单击鼠标关闭弹出框

Close pop-up box with mouse click outside boundary

本文关键字：鼠标 边界 单击      更新时间：2023-09-26

我制作了这个主页。它有带有登录字段的弹出框。当出现弹出窗口时，背景将变暗。但是，如果用户点击框边界之外的任何位置，弹出窗口都应该关闭。我已经创建了函数closeOverlay，当用户在键盘上点击"esc"时，它会工作，但当用户在框的边界外点击时，什么都不会发生。当用户点击escape或将鼠标移出框边界并点击时，我如何使其在这两种情况下都能工作

这是HTML代码

<head>
        <link rel="stylesheet" type="text/css" href="LAb2css.css">
</head>
<script>
    window.onload = function() {

        setInterval(move, 10000);
    }

    function move() { //makes the box move in relation to the box div
              var d = document.getElementById('moveQuestion');
              var boxh = document.getElementById('boxDIV').clientHeight - 100; //keeps the image in the box by subtracting height
              var boxw = document.getElementById('boxDIV').clientWidth - 100; //keeps the image in the box by subtracting the width
              document.onmousemove = function calc(e) {
                var x = e.clientX ;
                var y = e.clientY;
                if (x < boxw) {
                    d.style.left = x +'px';
                }
                if (y < boxh) {
                    d.style.top = y +'px';
                }
              };
          };

function signin() { //displays the sign in form
            var lg = document.getElementById('login');
            var ov = document.getElementById('BackDIV');
            ov.style.display = 'block';
            lg.style.display = 'block';
          };
function join() { //calls the join form for users to register
            var lg = document.getElementById('signup');
            var ov = document.getElementById('BackDIV');
            ov.style.display = 'block';
            lg.style.display = 'block';
            activeForm = 1; //sets the active form counter to 1; a form is active
        };
function recoverPass() { //displays the recoverPassword form for the user to recover password
            var ov = document.getElementById('BackDIV');
            ov.style.display = 'block';
            var rp = document.getElementById('recoverPassword');
            rp.style.display = 'block';
             //sets the active form counter to 1; a form is active
        };    


         function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none 
            var ov = document.getElementById('BackDIV');
            var rp = document.getElementById('recoverPassword');
            var lg = document.getElementById('login');
            var sg = document.getElementById('signup');
            ov.style.display = 'none';
            rp.style.display = 'none';
            lg.style.display = 'none';
            sg.style.display = 'none';
          };


     function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none 
            var ov = document.getElementById('BackDIV');
            var rp = document.getElementById('recoverPassword');
            var lg = document.getElementById('login');
            var sg = document.getElementById('signup');
            ov.style.display = 'none';
            rp.style.display = 'none';
            lg.style.display = 'none';
            sg.style.display = 'none';
          };

             function closeOverlay() { // function closes the black transparent overlay div by setting the display properties of all the forms to none 
            var ov = document.getElementById('BackDIV');
            var rp = document.getElementById('recoverPassword');
            var lg = document.getElementById('login');
            var sg = document.getElementById('signup');
            ov.style.display = 'none';
            rp.style.display = 'none';
            lg.style.display = 'none';
            sg.style.display = 'none';
          };

          document.onkeydown = function(evt) { //makes the escape key to call the closeOverlay() function
            evt = evt || window.event;
            if (evt.keyCode == 27) {
                closeOverlay();
            }
          };

</script>
<body onload = move()>
    <div id="BackDIV">
    </div>
    <p>
        <?php
            // Just for displaying the display type for testing
            echo 'Display type = ' . $display_type . '<br><br>';
            if ($display_type == 'Start') {
                echo 'StartPage<br>';
            }
            else if ($display_type == 'SignIn') {
                echo "StartPage with 'SignIn' popup box<br>"; 
            }
            else if ($display_type == 'Join') {
                echo "StartPage with 'Join' popup box<br>"; 
            }
            else if ($display_type == 'ForgotPassword') {
                echo "StartPage with 'ForgotPassword' popup box<br>"; 
            }
            else {
                echo 'StartPage with no popup box<br>'; 
            }
        ?>
    </p>

    <div id = "main">
        <div id = "dateDIV"><?php $t = time(); echo (date("Y-m-d H:i:s", $t)); ?></div>
        <div id = "titleDIV">
          <h2>Thompson Rivers University - Question/Answers</h2>                    
        </div>
        <div id ="dopDownDIV">
            <ul>
              <li>
                <a href = "#"><img src="images/responsive_menu.png" title="MENU" alt="Menu" id="MenuIMG" height="50PX" width="50px" /></a>
                <ul>
                  <li><a href="#" onclick = "signin()">SIGN IN</a></li>
                    <li><a href="#" onclick="join()">JOIN</a></li>
                    <li><a href="#" onclick="recoverPass()">FORGOT PASSWORD</a></li>
                </ul>
              </li>
            </ul>       
        </div>
        <div id="boxDIV"> <a href ="#"><img src ="images/question-mark.png" id="moveQuestion" title= "Image moving In Box" alt="ImgInbox" height = "100px" width = "100px"</a></div>
        <div id= "BottomDIV">
            <a href = "http://cs.tru.ca" target="_blank"> About Us </a>
        </div>
    </div>
<!--Div for Signup form on click -->
 <div id="signup" onclick="closeOverlay()">
            <form action="main.html" method="get" autocomplete="on">
                <input type="text" name="username" autofocus><br /><p>Your email address</p>
                <input type="password" name="password"><br /><p>Password</p>
                <br /><br /><br />
                <input id="formButton" type="submit" value="Join">
                <a href="StartPage.html">
                    <input type="button" value="Cancel"/>
                </a>
            </form>
 </div>

<!--DIv for recoverPassword -->
<div id="recoverPassword" onclick="closeOverlay()">
            <!--<h1>Recover Password</h1> -->
            <form action="main.html" method="get" autocomplete="on">
                <input type="text" name="recoveremail" placeholder="The email address you registered with" autofocus><br /><p>Username (or email address)</p>
                <input id="formButton" type="submit">
                <a href="StartPage.html">
                    <input type="button" value="Cancel"/>
                </a>
            </form>
        </div>  
<!--Div for Login -->
    <div id="login" onclick="closeOverlay()">
            <form action="controller.php" method="post" autocomplete="on" >
                <input type='hidden' name='command' value='SignIn'>
                <input type="text" name="user" autofocus value="<?php echo $username ?>"> <?php echo $error_msg_username; ?> ><br />                            <p>Username (or email address)</p>
                <input type="password" name="pass" value="<?php echo $password ?>"> <?php echo $error_msg_password ?> ><br /><p>Password</p>
                <br/>
                <input type="submit" id="formButton" value="Sign In" >
                <a href="StartPage.html">
                    <input type="button" value="Cancel"/>
                </a>

            </form>
        </div>


</body>
</html>

这样？在窗口中添加一个事件侦听器，如果需要，可以删除confirm。

var pop=document.getElementById('over');window.addEventListener('click',function(){
  confirm('close popup')?
  pop.style.display="none":pop.style.display="block";
  
});
#over{min-width:80%;min-height:  100px;background-color:red;}
<div id="over">v</div>

试试这个

<div id="BackDIV" onclick="closeOverlay();"></div>
相关文章：