Как закрыть всплывающее окно, когда другое всплывающее окно открыто с помощью JavaScript?

Question

Я работаю над веб-приложением Python / Django, и у меня пока мало знаний о JavaScript. Ответы, которые я нашел, предлагают немного другой подход, и я не могу приспособить эти решения к своему коду из-за моего небольшого знания JS. Буду благодарен за помощь. Заранее спасибо!

Итак, у меня есть несколько всплывающих окон windows, которые имеют разные идентификаторы, и все они открываются и закрываются с помощью одних и тех же двух JavaScript функций, передавая их в качестве переменной $ target , Я также хочу закрыть любое открытое всплывающее окно, если пользователь открыл другое всплывающее окно, поэтому только одно можно открыть одновременно, а также закрыть всплывающее окно, если пользователь нажимает кнопку глифа (то же самое, что открывало это всплывающее окно). с первым щелчком мыши).

Вот мой код: html template

<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 file

/* 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!
}