Question

我正在使用Python / Django Web应用程序，但是对JavaScript的了解还很少。我搜索过的答案提出了一些不同的方法，由于对JS的了解很少，我无法根据我的代码调整这些解决方案。将感谢您的帮助。预先感谢！

因此，我有几个弹出窗口，它们具有不同的ID，并且通过将其ID作为$ target变量传递来使用相同的两个JavaScript函数打开和关闭它们。如果用户打开了另一个弹出窗口，我也想关闭任何打开的弹出窗口，因此只能同时打开一个弹出窗口，如果用户单击一个glyphicon按钮（也就是打开该弹出窗口的按钮），则也要关闭一个弹出窗口第一次点击）。

这是我的代码： html模板

<script>
function popup($target) {
      document.getElementById($target).style.display = "block";
}

function closepopup($target) {
      document.getElementById($target).style.display = "none";
}
</script>

这些函数的调用示例（相同的模板）：

<a class="btn btn-default" onclick="popup('add')" style="position: absolute; right: 2%; bottom: 10%; padding: 6px;"><span class="glyphicon glyphicon-pencil"></span></a> <div class="form-popup popupfont" id="add-important">
      <form action="{% url 'add-general' %}" method="post" class="form-container">
            {% csrf_token %}
            <label for="task_text">Add a task:</label>
            <input type="text" id="task_text" name="task">
            <input type="date" id="time" name="datestr" value="{{ date }}">
            <input type="hidden" name="type" value="important">
            <input type="hidden" name="datestr" value="{{ date }}">
            <br><br><p><input type="submit" class="formbutton" name="Send" value="Send" onclick="closepopup('add')">
      </form>
      <button class="formbutton gray" style="font-size: 1.0em;" onclick="closepopup('add')">  <span>Back</span></button> </div>

css文件

/* The popup form - hidden by default */
.form-popup {
  width: 500px;
  display: none;
  position: absolute;
  border: 3px solid #5f788a;
  border-radius: 8px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  z-index: 9;
  background-color: #B0C4DE;
}

.popupfont {
 font-family: Georgia, serif;
 font-size: 1.2em;

}

/* Add styles to the form container */
.form-container {
  max-width: 250px;
  padding: 10px;
}

Answer 1

保存对最后打开的弹出元素的引用。当打开一个新的弹出窗口时，通过其引用关闭已经打开的弹出窗口，并将新元素保存为引用。这样的事情应该起作用：

var lastOpenedPopup = null;

function popup($target) {
  var targetEl = document.getElementById($target); // get element
  targetEl.style.display = "block";                // show element
  if (lastOpenedPopup) {                           // another popup visible?
    closepopup(lastOpenedPopup);                   // then close!
  }
  lastOpenedPopup = targetEl;                      // save element reference
}

function closepopup($target) {
  var targetEl = document.getElementById($target); // get element
  targetEl.style.display = "none";                 // hide element
  lastOpenedPopup = null;                          // unset reference!
}

使用JavaScript打开另一个弹出窗口时如何关闭弹出窗口？

1 个答案: