个人中心
gpt4 book ai didi

javascript - 无法关闭两个 div 之一

转载 作者：行者123 更新时间：2023-12-03 05:06:51 26 4
gpt4 key购买 nike

我有几个关于 javascript 的问题:

  1. 无法关闭 id=myModalName 的 div，然后单击最打开的 myModalName，然后单击输入，不知何故，第二个 div id=myModalLocation 关闭。
  2. 也许您可以说出如何在一个脚本中比较两个脚本。

对代码感到抱歉，然后我在这里更新显示错误{ "message": "未捕获的语法错误:无效的正则表达式:缺少/", “文件名”:“http://stacksnippets.net/js”， “线诺”:243， “科诺”: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>

最佳答案

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

您可以同时输入 if单个onclick中的语句功能。它们都可以在同一个 <script> 中.

关于javascript - 无法关闭两个 div 之一，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41981344/

26 4 0
文章推荐： psql - 如何使用 psql 命令行界面显示表中的数据？
文章推荐： Azure 服务总线重试策略的 minbackoff 不起作用？
文章推荐： r - 当有行名时，write.table 将不需要的前导空列写入标题
文章推荐： c# - 如何使用 MassTransit 为多个消费者订阅一个队列？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com