jQuery函数的自举模态问题

Question

我有2个按钮和模式。 如果我正在使用bootstrap.js，则模式将消失。 我写了jQuery的模态函数，但它不能正常工作，谁能帮助我。 JsFiddle链接

按钮代码

<button id="modal1" class="">ModalA</button>
<button id="modal2" class="">ModalB</button>

模态代码

<div class="modal modal-sm fade in" id="modal1" >
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title'>Modal title</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        <h1>Hello world</h1>

      </div>
    </div>

    <div class='modal-footer'>");
      <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
    </div>
  </div>
</div>



<div class="modal modal-sm fade in" id="modal2" >
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title'>Modal title</h5>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
      </div>
      <div class='modal-body'>
        <h1>I am modal B</h1>

      </div>
    </div>

    <div class='modal-footer'>");
      <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
    </div>
  </div>
</div>

jQuery的

$("button").click(function() {
  var idValue = $(this).attr("id");
  //alert(idValue);
  $('#' + idValue).modal('show');
  $('#'+idValue).modal({backdrop: false});
  $('#'+idValue).modal({keyboard: true});
});

Answer 1

您在两个地方使用相同的id's 。 看一下button#modal1和.modal#modal1 。 不需要来自按钮的id's ，您可以删除它们以及jquery modal函数。

对于引导模式 ，将这两个按钮都添加到data-toggle="modal" data-target="the modal container id"

请检查一下： https : //jsfiddle.net/coheafof/