Home > DeveloperSection > Forums > How to open bootstrap multiple custom model popup?
Ashish Pandey

Total Post:128

Posted on    February-25-2015 5:15 AM

 Bootstrap Bootstrap Modal 

 1 Reply(s)
 1371  View(s)
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 class="modal-body">



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





My question is how to open multiple custom model popup.

Thank you in advance.

Tanuj Kumar

Total Post:134

Posted on    February-25-2015 6:04 AM

Try this code:

<div class="container">

    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">

        New Model





        $(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>');


                $(".myModal" + le).modal({

                    backdrop: 'static',

                }, 'show');

                $(".myModal" + le).on('hidden.bs.modal', function () {

                    $(".myModal" + le).remove();






Modified On Mar-15-2016 05:36:13 AM

Don't want to miss updates? Please click the below button!

Follow MindStick