Bootstrap Modal Issue with Jquery function

Question

I have 2 buttons and modals. If I am using bootstrap.js then the modal is disappearing. I wrote jquery modal function but it is not working properly could any one help me. JsFiddle Link

Button Code

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

Modal Code

<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

You use the same id's in two places. Look at button#modal1 and .modal#modal1 . The id's from buttons are not necessary, you can remove them and also your jquery modal function.

And for bootstrap modal add to both buttons data-toggle="modal" data-target="the modal container id"

Please check it out: https://jsfiddle.net/coheafof/