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

Total Post:128

Points:898
Posted on    February-25-2015 5:15 AM

 Bootstrap Bootstrap Modal 
Ratings:


 1 Reply(s)
 937  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>

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



Tanuj Kumar

Total Post:134

Points:940
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

    </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 Mar-15-2016 05:36:13 AM

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

Follow MindStick