forum

Home / DeveloperSection / Forums / How to open bootstrap multiple custom model popup?

Ask Question

How to open bootstrap multiple custom model popup?

Anonymous User281325-Feb-2015

Hello I’m new in bootstrap.

I’m open bootstrap model popup successfully.

This Is my model popup code

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

bootstrapbootstrap modal 
Updated on 25-Feb-2015
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Anonymous User

Anonymous User

25-Feb-2015

Try this code:

<divclass="container">
    <buttontype="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>

Liked By