Question

关于javascript我几乎没有问题：

无法使用id = myModalName关闭div然后单击最开放的myModalName然后单击输入，不知何故第二个div id = myModalLocation关闭。
也许你可以说如何比较两个脚本。

对某些代码感到抱歉，我在这里更新显示错误{ “message”：“未捕获的SyntaxError：无效的正则表达式：缺少/”， “filename”：“http://stacksnippets.net/js”， “lineno”：243， “colno”：7 }

这是代码：

var modalName = document.getElementById('myModalName');

// Get the button that opens the modal
var btn = document.getElementById("input_name");

// When the user clicks the button, open the modal
btn.onclick = function() {
  modalName.style.display = "block";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalName) {
    modalName.style.display = "none";
  }
}


/ /
Get the modal
var modalLocation = document.getElementById('myModalLocation');

// Get the button that opens the modal
var btn = document.getElementById("input_location");

// When the user clicks the button, open the modal
btn.onclick = function() {
  modalLocation.style.display = "block";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalLocation) {
    modalLocation.style.display = "none";
  }
}

* {
  margin: 0;
  padding: 0;
}
body {
  margin: auto;
  width: 960px;
  padding-top: 70px;
  font-family: "Oswald", sans-serif;
}
.SearchForm {
  margin: auto;
  margin-top: 50px;
}
.SearchForm_row {
  margin: auto;
  margin-top: 10px;
  height: 110px;
  width: 100%;
  border: 3px solid;
  border-radius: 50px;
  border-color: rgba(86, 192, 255, 0.5);
}
#row3 {
  width: 400px;
}
.SearchForm_row_row {
  height: 50px;
  width: 200px;
  float: left;
  margin-top: 20px;
  margin-left: 25px;
  border-left: 3px solid;
  border-color: rgba(86, 192, 255, 0.5);
  padding: 10px 0px;
  position: relative;
  left: 5px;
}
.SearchForm_row_row1 {
  height: 50px;
  width: 475px;
  float: left;
  margin-top: 20px;
  margin-left: 25px;
  border-left: 3px solid;
  border-color: rgba(86, 192, 255, 0.5);
  padding: 10px 0px;
  position: relative;
  left: 5px;
}
.SearchForm_row_row_input,
.SearchForm_row_row_label {
  width: 250px;
  padding-left: 25px;
  float: left;
}
.input2 {
  height: 40px;
  width: 190px;
  border: none;
  font-size: 18px;
  outline: 0px;
}
.input2:focus {
  border-bottom: 1.5px solid #4CAF50;
}
.span {
  font-size: 15px;
  color: rgb(161, 153, 135);
}
#input_start {
  width: 40%;
}
#input_ends {
  width: 40%;
  position: relative;
  left: 5px;
}
.par {
  display: inline-block;
  font-size: 20px;
}
.search_button {
  background-color: #fff;
  /* Green */
  border: none;
  color: black;
  padding: 6px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 25px;
  margin-left: 5px;
  cursor: pointer;
  border: 2px solid;
  border-radius: 10px;
  outline: none;
  border-color: #4CAF50;
}
.search_button:hover {
  background-color: #4CAF50;
  color: black;
}
.SearchForm_row_row_button {
  float: left;
  position: relative;
  bottom: 20px;
  left: 40px;
}
/*Cia yra js of type*/

/*Cia yra js of type*/

/*Cia yra js of type*/

/*Cia yra js of type*/

/* The Modal (background) */

.modal-name {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
}
/* Modal Content */

.modal-content-name {
  background-color: #fefefe;
  margin-left: 50px;
  margin-top: 140px;
  padding: 25px;
  border: 1px solid #888;
  width: 85%;
  border: 3px solid;
  border-radius: 50px;
  border-color: rgba(86, 192, 255, 0.5);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Svetainių kūrimas</title>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <section class="SearchForm">
    <div class="SearchForm_row">
      <div class="SearchForm_row_row">
        <label class="SearchForm_row_row_label">
          <span class="span">What?</span>
        </label>
        <div class="SearchForm_row_row_input">
          <input type="text" autocomplete="off" placeholder="Event type or name" name="name" class="input2" id="input_name"></input>
        </div>
      </div>

      <div class="SearchForm_row_row">
        <label class="SearchForm_row_row_label">
          <span class="span">Where?</span>
        </label>
        <div class="SearchForm_row_row_input">
          <input type="text" autocomplete="off" placeholder="Event place" name="location" class="input2" id="input_location"></input>
        </div>
      </div>

      <div class="SearchForm_row_row1">
        <label class="SearchForm_row_row_label">
          <span class="span">When?</span>
        </label>
        <div class="SearchForm_row_row_input">
          <input type="text" autocomplete="off" placeholder="Event starting" name="date" class="input2" id="input_start"></input>
          <p class="par">&rarr;</p>
          <input type="text" autocomplete="off" placeholder="Event ends" name="date" class="input2" id="input_ends"></input>
        </div>
        <div class="SearchForm_row_row_button">
          <button class="search_button">&#x1f50d;</button>
        </div>
      </div>

      <div id="myModalName" class="modal-name">
        <div class="modal-content-name">
          <p>Some text in the Modal..</p>
        </div>
      </div>

      <div id="myModalLocation" class="modal-location">
        <div class="modal-content-location">
          <p>Some text</p>
        </div>
      </div>

    </div>
  </section>


</body>

</html>

Answer 1

你的第二段代码替换了window.onclick中的函数，删除了隐藏模态的代码。

您可以将两个if语句放在一个onclick函数中。他们都可以在同一个<script>。

无法关闭两个div中的一个

1 个答案: