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功能。

对于 bootstrap模式，添加到两个按钮data-toggle="modal" data-target="the modal container id"

请查看： https://jsfiddle.net/coheafof/

使用Jquery函数的Bootstrap模态问题

1 个答案: