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/