How to open bootstrap multiple custom model popup?

Total Post:128

Points:898
 1833  View(s)
Ratings:
Rate this:

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.

  1. Post:134

    Points:940
    Re: How to open bootstrap multiple custom model popup?

    Try this code:

    <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">&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-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>

      Modified On Apr-09-2018 01:46:19 AM

Answer