How to open bootstrap multiple custom model popup?

Hello I’m new in bootstrap.

I’m open bootstrap model popup successfully.

This Is my model popup code

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">New Model</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
  </div>
</div>

My question is how to open multiple custom model popup.

Thank you in advance.

<div class="container">
    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">
        New Model
    </button>
</div>
<script>
        $(function () {
            $(document).on('click', '.btn-warning', function () {
                var me = this;
                var le = $('.modal-dialog').length + 1;
                var customModal = $('<div class="modal fade myModal' + le + '" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-warning">New Model</button></div></div></div></div>');
                $('body').append(customModal);
                $(".myModal" + le).modal({
                    backdrop: 'static',  }, 'show');
                $(".myModal" + le).on('hidden.bs.modal', function () {
                    $(".myModal" + le).remove();
                });
            });
        });

    </script>

forum

How to open bootstrap multiple custom model popup?

Can you answer this question?

1 Answers