有没有办法解决我的弹出问题？

时间：2019-07-17 17:24:54

标签： javascript

我对javascript编程有点陌生。我正在做一个通知管理应用程序。我正在尝试弹出facebook通知之类的弹出窗口。当我单击图标时，它以弹出形式出现时并没有消失，这是正常现象，当我单击屏幕上的任何位置时，弹出窗口都消失了，这也很好。当我将文本放入弹出窗口中并单击时，它不会消失，这仍然是正常现象，但是当我创建表格或表单时，单击并抓住它就会消失。请帮帮我。这是我的代码。

function notification() {
  document.getElementById("forme").style.display = "block";
}

window.onclick = function(e) {
  if (e.target == forme || e.target == bouton) {
    document.getElementById("forme").style.display = "inline-block";
  } else {
    document.getElementById("forme").style.display = "none";	
  }
}
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="container">
      <div id="icone">
        <span>
          <a href="#"><img src="bell.png" width="40px" height="40px" id="bouton" onclick="notification()"></a>
        </span>
      </div>
    </div>
  </nav>

  <div id="forme" class="popup">
    <form action="index.php">
      <input type="text" name="">
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

对于您的问题，if语句中的条件e.target == forme将不满足，因为它是div元素的ID。如果将id添加到input元素并将其包含在if语句的条件中，则输入将保持打开状态。

此外，如果在选择其他项目时希望保持弹出窗口的打开状态，则可以将这些项目的ID添加到if语句中。

function notification() {
  document.getElementById("forme").style.display = "block";
}

window.onclick = function(e) {
  if ( e.target == bouton || e.target == formeInput) {
    document.getElementById("forme").style.display = "inline-block";
  } else {
    document.getElementById("forme").style.display = "none";	
  }
}
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="container">
      <div id="icone">
        <span>
          <a href="#"><img src="bell.png" width="40px" height="40px" id="bouton" onclick="notification()"></a>
        </span>
      </div>
    </div>
  </nav>

  <div id="forme"  class="popup">
    <form action="index.php">
      <input id="formeInput" type="text" name="">
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
  </script>
</body>
</html>

关于能够单击一个填充有来自SQL数据库的链接的弹出表，并能够保持该表处于打开状态，如问题注释中提到的@Robb，我建议使用Bootstrap的模式因为您已经在使用Bootstrap。这将提供具有相同功能的更易于重用的解决方案。

如果您仍然希望不使用Bootstrap模态的解决方案，则可以通过在if语句中的.parentElement之后使用sevaral e.target属性来定位表的ID。在同一条if语句中，您可以使用“ .classList.contains（” insert-class-for-links“）”来了解何时单击表上的链接。

以下是可用于此解决方案的代码：

function notification() {
  document.getElementById("forme").style.display = "block";
}

document.onclick = function(e) {
if(e.target != null && e.target.parentElement != null &&
e.target.parentElement.parentElement != null

&&
e.target.parentElement.parentElement.parentElement != null

)

{


  if ( e.target == bouton|| e.target.parentElement.parentElement.parentElement == pTable
  ||
  e.target.classList.contains("aClass")
  ) {
    document.getElementById("forme").style.display = "inline-block";
  } else {
    document.getElementById("forme").style.display = "none";	
  }
  
  
}

else{

    document.getElementById("forme").style.display = "none";	


}



}
.aClass

{

background-color:blue;
}

.tableClass

{
  background-color:green;

}
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="index.css">
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="container">
      <div id="icone">
        <span>
          <a href="#"><img src="bell.png" width="40px" height="40px" id="bouton" onclick="notification()"></a>
        </span>
      </div>
    </div>
  </nav>

  <div id="forme"  class="popup">
   
   <!--
   <form action="index.php">
      <input id="formeInput" type="text" name="">
    </form>
    -->
    
    <div  >






</br>


<table id="pTable" class = "tableClass">
        <tr>
            <td><a class="aClass"  href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
        </tr>
        <tr>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a></td>
            <td><a class="aClass" href="#">content</a>></td>
        </tr>
    </table>

相关问题
最新问题