HOW TO OPEN BOOTSTRAP MULTIPLE CUSTOM MODEL POPUP?

Ashish Pandey

Total Post:128

Points:898
Posted by  Ashish Pandey
 1448  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. Tanuj Kumar

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

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!