Question

我正在研究Bootstrap Pop Up Modals。

我有2个名为 Button1 ＆amp;的按钮的将Button2

＆安培;

我有2个名为 Modal1 的模态＆amp;的 Modal2

注意： Button2 位于 Modal1 ＆amp; Button1 位于网页上。

如果我点击 Button1 ， Modal1 应该是开放＆amp;如果我单击模态内的 Button2 ，则应自动隐藏Modal1并显示Modal2。

我正在使用jQuery Yet＆amp ;;它运作良好。

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

问题：

我如何使用Pure JavaScript来做到这一点。 ???????

Answer 1

这是我编写的解决方法，以便使用DOM操作在本机Java Script中关闭modal。使用Bootstrap 4.

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关闭某个模式。这样：

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的线索

Answer 2

您可以将id分配给通常会关闭/打开模态的按钮，模拟单击按钮以编程方式关闭/打开模态。

例如- $('#modal1').modal('hide'); $('#modal2').modal('show');将成为 document.getElementById('modalX').click();

Answer 3

你可以尝试一下，它可能会起作用。

 document.addEventListener('DOMContentLoaded', function(){
        // new modal instance
        var modal1 = new Modal('#modal1');
        var modal2 = new Modal('#modal2');

 document.getElementById('button1').addEventListener('click', function(){
        modal1.show();
        modal1.hide();

        }); 
  document.getElementById('button2').addEventListener('click', function(){
        modal2.show();
        modal2.hide();

        });
})

Answer 4

这是一个有效的解决方案：

https://codepen.io/hamzeen/pen/MErYgp。

你可以在你的应用程序中没有编写任何Javascript来实现它 YET，我找不到使用普通javascript的方法。锚标记上的data-target属性处理切换，请检查以下代码：

<a href="#" class="btn btn-lg btn-danger" data-toggle="modal" data-
target="#modal1">Open Modal 1</a>

我在Bootstrap的Javascript库中找到了以下内容，这可能对您有所帮助！

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under the MIT license
 */
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript 
requires jQuery");

Answer 5

您可以使用javascript创建'模态'元素。优点是您可以重复使用它。我已经使用javascript创建了一个示例bootstrap模式。您可以对其进行修改以添加更多功能。

var Interface = {};
Interface.component = function ( dom ) {
    this.dom = dom;
};
Interface.component.prototype = {
    setId: function ( id ) {
        this.dom.id = id;
        return this;
    }
    // you can add more common functions here
};

Interface.BootstrapModal = function ( id, modalHeading, modalBodyContents, successButtonText, failureButtonText ) {

    var scope = this;
    var dom = document.createElement( 'div' );
    dom.className = 'modal fade';
    dom.id = id;
    dom.role = "dialog";

    var modalDialog = document.createElement( 'div' );
    modalDialog.className = 'modal-dialog';

    var modalContent = document.createElement( 'div' );
    modalContent.className = 'modal-content';

    var modalHeader = document.createElement( 'div' );
    modalHeader.className = 'modal-header';

    var modalHeaderXButton = document.createElement( 'button' );
    modalHeaderXButton.className = 'close';
    modalHeaderXButton.setAttribute("data-dismiss", "modal");
    modalHeaderXButton.innerHTML = '&times';

    var modalHeaderHeading = document.createElement( 'h3' );
    modalHeaderHeading.className = 'modal-title';
    modalHeaderHeading.innerHTML = modalHeading;

    modalHeader.appendChild(modalHeaderXButton);
    modalHeader.appendChild(modalHeaderHeading);

    var modalBody = document.createElement( 'div' );
    modalBody.className = 'modal-body';
    modalBody.appendChild(modalBodyContents);

    var modalFooter = document.createElement( 'div' );
    modalFooter.className = 'modal-footer';

    var modalFooterSuccessButton = document.createElement( 'button' );
    modalFooterSuccessButton.className = 'btn btn-success';
    modalFooterSuccessButton.id = "<GIVE THE ID YOU NEED>";
    //modalFooterSuccessButton.setAttribute("data-dismiss", "modal");
    modalFooterSuccessButton.innerHTML = successButtonText;

    var modalFooterFailureButton = document.createElement( 'button' );
    modalFooterFailureButton.className = 'btn btn-danger';
    modalFooterFailureButton.id = "<GIVE THE ID YOU NEED>";
    modalFooterFailureButton.setAttribute("data-dismiss", "modal");
    modalFooterFailureButton.innerHTML = failureButtonText;

    modalFooter.appendChild(modalFooterSuccessButton);
    modalFooter.appendChild(modalFooterFailureButton);

    modalContent.appendChild(modalHeader);
    modalContent.appendChild(modalBody);
    modalContent.appendChild(modalFooter);
    modalDialog.appendChild(modalContent);

    dom.appendChild(modalDialog);

    modalFooterSuccessButton.addEventListener( 'click', function ( event ) {

        // perform your actions

    } );

    this.dom = dom;
    return this;

};

Interface.BootstrapModal.prototype = Object.create( Interface.component.prototype );
Interface.BootstrapModal.prototype.constructor = Interface.BootstrapModal;

Interface.BootstrapModal.prototype.show = function () {

    $('#' + this.dom.id).modal({backdrop: 'static', keyboard : false});

};

Interface.BootstrapModal.prototype.hide = function () {

    $('#' + this.dom.id).modal('hide');

};

这里我创建了一个modal元素作为对象。您可以像使用

一样使用它

var modalContent = document.createElement( 'div' );
var m = new Interface.BootstrapModal( 'id', 'modalHeading', modalContent, 'successButtonText', 'cancelButtonText' );
document.getElementById( <SOME ELEMENT> ).appendChild( m.dom );

现在 m.show（）会显示模态，而 m.hide（）会隐藏相同的

这可以用作引导模态的通用模板。

Answer 6

这是在纯JS中获取modal.hide（）（以及所有其他模态方法！）的方法。
您可以在官方文档页面上尝试使用，这里以modal documentation为例。要注意的是，模态在模态DOM对象上存储类似于'jQuery331042511280243656492'的属性。此属性内部包含所有模态方法！只需先打开此模式，然后在控制台中运行代码即可。

更新：该jQuery对象仅附加在模态的第1个开口处，并且此后一直存在。这意味着，除非我们已经至少打开了它一次，否则我们无法通过此方法“ .show（）”。

    // get reference to the modal. It's 'div.modal', in general
    var modal = document.querySelector('#exampleModalLong');
    // get the key under which the modal's methods are stored.
    var jQueryObj = Object.keys(modal).filter((key) => (key.toString().indexOf('jQuery') !== -1) && modal[key].hasOwnProperty('bs.modal'));
    // ... and close the modal!
    modal[jQueryObj]['bs.modal'].hide();

Answer 7

你可以尝试一下......

function showmodel(){
var Modal1 = document.getElementById("Modal1"); 
Modal1.show(); 
}
function hidemodel1()
{
var Modal1 = document.getElementById("Modal1"); 
var Modal2 = document.getElementById("Modal2"); 
Modal1.hide(); 
Modal2.show(); 
}

在按钮上单击调用上述方法。

使用Pure JavaScript On Click隐藏Bootstrap模式

7 个答案:

这是一个有效的解决方案：