使用 Pure JavaScript On Click 隐藏 Bootstrap Modal

问题描述

我正在研究 Bootstrap 弹出模式.

I was working on Bootstrap Pop Up Modals.

我有 2 个按钮，名为 Button1 &按钮 2.

I have 2 Buttons named Button1 & Button2.

&

我有 2 个 Modal，名为 Modal1 &Modal2.

I have 2 Modals named Modal1 & Modal2.

注意:Button2 位于 Modal1 内 &Button1 在网页上.

如果我点击 Button1 ，Modal1 应该是 Open &如果我点击位于 Modal 内的 Button2，那么 Modal1 应该会自动隐藏，而 Modal2 应该会显示出来.

If I click Button1 , Modal1 should be Open & If I click Button2 that is inside the Modal, then Modal1 should be hide automatically and Modal2 should be shown.

我正在使用 jQuery Yet &它工作正常.

I am doing it using jQuery Yet & It's working Fine.

<script>
$('#button1').click(function()
{
    $('#modal1').modal('hide');
    $('#modal2').modal('show');
});
</script>

问题:

我如何使用纯 JavaScript 做到这一点.???????

推荐答案

这是我编写的解决方法，目的是使用 DOM 操作关闭本机 Java Script 中的模式.使用 Bootstrap 4.

Here is workaround I wrote in order to close modal in native Java Script, using DOM manipulation. Bootstrap 4 is used.

function closeAllModals() {

    // get modals
    const modals = document.getElementsByClassName('modal');

    // on every modal change state like in hidden modal
    for(let i=0; i<modals.length; i++) {
      modals[i].classList.remove('show');
      modals[i].setAttribute('aria-hidden', 'true');
      modals[i].setAttribute('style', 'display: none');
    }

     // get modal backdrops
     const modalsBackdrops = document.getElementsByClassName('modal-backdrop');

     // remove every modal backdrop
     for(let i=0; i<modalsBackdrops.length; i++) {
       document.body.removeChild(modalsBackdrops[i]);
     }
  }

所以这个函数会关闭页面上找到的所有模态.您可以修改它以根据 id 关闭某个特定模式.这样:

So this function closes all modals found on page. You can modify it to close one certain modal based on id. This way:

function closeOneModal(modalId) {

    // get modal
    const modal = document.getElementById(modalId);

    // change state like in hidden modal
    modal.classList.remove('show');
    modal.setAttribute('aria-hidden', 'true');
    modal.setAttribute('style', 'display: none');

     // get modal backdrop
     const modalBackdrops = document.getElementsByClassName('modal-backdrop');

     // remove opened modal backdrop
      document.body.removeChild(modalBackdrops[0]);
  }

所以，根本不知道 jQuery

So, no clue of jQuery at all

这篇关于使用 Pure JavaScript On Click 隐藏 Bootstrap Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！