关闭子模态，同时仅在单击关闭按钮时保持父模态打开

Question

所以我运行遇到了一些问题，我不知道如何关闭子模态并保持父模态打开，所以我想问社区看看我是否可以得到一些帮助。

所以这就是我正在尝试做的事情：

我打开单击 'Launch parent modal'，我希望显示父模式（效果很好）。
当我从父模态中启动子模态时，我看到了子模态（效果很好）。
我希望能够单击子模态内的关闭按钮并返回到父模态，因为它仍然是 is-active，否则如果他们单击阴影中的任何位置，它将关闭所有目前正在做的模态。

总而言之，我只想关闭子模态，这样只有在单击关闭按钮时我才能看到父模态。

document.addEventListener('DOMContentLoaded', function() {
  const rootEl = document.documentElement;
  const $modals = document.querySelectorAll('.modal');
  const $modalButtons = document.querySelectorAll('.modal-button');
  const $modalCloses = document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');

  if ($modalButtons.length > 0) {
    $modalButtons.forEach(function ($el) {
      $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        openModal(target);
      });
    });
  }

  if ($modalCloses.length > 0) {
    $modalCloses.forEach(function ($el) {
      $el.addEventListener('click', function () {
        closeModals();
      });
    });
  }

  function openModal(target) {
    var $target = document.getElementById(target);
    rootEl.classList.add('is-clipped');
    $target.classList.add('is-active');
  }

  function closeModals() {
    rootEl.classList.remove('is-clipped');
    $modals.forEach(function ($el) {
      $el.classList.remove('is-active');
    });
  }

  document.addEventListener('keydown', function (event) {
    var e = event || window.event;

    if (e.keyCode === 27) {
      closeModals();
      closeDropdowns();
    }
  })
});

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" rel="stylesheet"/>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch parent modal</button>

<div id="modal-ter" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
    
    <p>
      This is the parent modal (Scroll down and click the child modal button).
    </p>
      
      <button class="button is-primary is-large modal-button" data-target="modal-ter2" aria-haspopup="true">Launch child modal</button>
      
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

<div id="modal-ter2" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      
      <p>
        This is the child modal
      </p>
      
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

Answer 1

我认为你应该为成功和取消按钮绑定不同的事件，因为它们有不同的逻辑。

document.addEventListener('DOMContentLoaded', function() {
  const rootEl = document.documentElement;
  const $modals = document.querySelectorAll('.modal');
  const $modalButtons = document.querySelectorAll('.modal-button');
  const $modalCloses = document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete');

  if ($modalButtons.length > 0) {
    $modalButtons.forEach(function ($el) {
      $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        openModal(target);
      });
    });
  }

  if ($modalCloses.length > 0) {
    $modalCloses.forEach(function ($el) {
      $el.addEventListener('click', function () {
        closeModals();
      });
    });
  }

  function openModal(target) {
    var $target = document.getElementById(target);
    rootEl.classList.add('is-clipped');
    $target.classList.add('is-active');
  }

  function closeModals() {
    rootEl.classList.remove('is-clipped');
    $modals.forEach(function ($el) {
      $el.classList.remove('is-active');
    });
  }
  
  $modals.forEach(function ($el) {
    $el.addEventListener('click', function(event) {
    if (event.target.classList.contains('cancel')) {
        $el.classList.remove('is-active');
      }
    })
  });

  document.addEventListener('keydown', function (event) {
    var e = event || window.event;

    if (e.keyCode === 27) {
      closeModals();
      closeDropdowns();
    }
  })
});

<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" rel="stylesheet"/>
<button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch parent modal</button>

<div id="modal-ter" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
    
    <p>
      This is the parent modal (Scroll down and click the child modal button).
    </p>
      
      <button class="button is-primary is-large modal-button" data-target="modal-ter2" aria-haspopup="true">Launch child modal</button>
      
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button cancel">Cancel</button>
    </footer>
  </div>
</div>

<div id="modal-ter2" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      
      <p>
        This is the child modal
      </p>
      
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button cancel">Cancel</button>
    </footer>
  </div>
</div>

关闭子模态，同时仅在单击关闭按钮时保持父模态打开

Close child modal while keeping parent open only on close button click

javascript

html

twitter-bootstrap

bulma