How to use Modal in Bootstrap3?

Question

css

It is necessary to use several modal windows on 1 page. The problem is that every time you have to copy the content and the modal itself.
I would like to initialize it once and transfer data there depending on the button pressed.

Answer 1

@watch2raff
3 buttons

<button data-modal-num="1" class="btn btn-primary btn-lg">Launch modal 1</button>
<button data-modal-num="2" class="btn btn-primary btn-lg">Launch modal 2</button>
<button data-modal-num="3" class="btn btn-primary btn-lg">Launch modal 3</button>

$('body').on('click', 'button', function(){
    var $this = $(this);
    var ourCommonModal = $('#myCommonModal');
    var ourModalBody = ourCommonModal.find('.modal-body');
    var modalNum = $this.data('modal-num'); //тут у нас будет номер модалки которую надо вызвать
    var someDataForModalOne = "First button clicked";
    var someDataForModalTwo = "Second button clicked";
    var someDataForModalThree = "Third button clicked";

//тут будут условные операторы, но в реальном контексте смотри уже что конкретно нужно сделать, вероятно они не нужны

if(modalNum == 1){
    outModalBody.html(someDataForModalOne);
} else if(modalNum == 2){
    outModalBody.html(someDataForModalTwo);
} else {
    outModalBody.html(someDataForModalThree);
}

//инициализируем окно
ourCommonModal.modal('show');

});

Our general modal, by default display:none

<div class="modal fade" id="myCommonModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">MyCommonTitle</h4>
      </div>
      <div class="modal-body">
        <p>My Not Common Data</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Did I understand the question correctly?

Answer 2

JavaScript? Hang the handler, assign IDs to different modals and pass data

Answer 3

As for IDs, by default, modal windows use the element's id.
If there are three links on the page and each has its own modal window, then it turns out you need three different modal windows. And if all these three modal windows have the same header, body and footer.
How to make it so that once on the page code a modal window, and depending on the link, a modal window opens with the corresponding content.

Answer 4

Try using data-* attributes. Those. when clicking on a link, check these attributes and use them. Or unclear?)