CODEWITHSUNDEEP
javascriptjquerycss
ikramlim
ikramlim

Reputation: 103

how i can close the modal(popup screen) in bootstrap when I have 2 modal

         <!DOCTYPE html>
         <html lang="en">
         <head>
          <title>Example of Bootstrap 3 Modals</title>
          <link rel="stylesheet"           href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
           <link rel="stylesheet"     href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-    theme.min.css">
          <script            src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">               </script>
              <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">          </script>

         <script type="text/javascript">
      $(document).ready(function(){
      $('.open-modal').click(function(){



        $('#myModal1').modal('hide');
    });


    </script>

This is css part:

     <style type="text/css">
       .bs-example{
          margin: 20px;
          }
          </style>
           </head>

the body part: Launch Demo Modal

          <!-- Modal HTML -->
         <div id="myModal" class="modal fade">
           <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <a href="#myModal1" class="btn btn-primary" data-toggle="modal">Launch Demo Modal</a>
            </div>
        </div>
    </div>
</div>

       <!-- Modal HTML -->
        <div id="myModal1" class="modal fade">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
                </div>
             <div class="modal-body">
                 <p>Do you want to save changes you made to document before closing?</p>
                  <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <!--
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                <a href="#myModal1" class="btn btn-default" data-dismiss="modal">close</a>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
      </div>
    </div>     
   </body>
  </html>

I have 2 modal in the same page. How I can click close button in second modal will close all the modal (popup)? Can you show me the step I wrong?

Upvotes: 0

Views: 901

Answers (2)

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

I think this is what you are looking for:

$('a[href="#myModal1"]').click(function() {
  $('div[id^="myModal"]').modal('hide');
});
$('.close').click(function() {
  $('div[id^="myModal"]').modal('hide');
});

jsFiddle.

Hope this helps.

Upvotes: 1

stackoverfloweth
stackoverfloweth

Reputation: 6907

try targeting by class

$(document).on('click', 'button[data-dismiss="modal"]', function(){
    $('.modal').modal('close');
});

Upvotes: 0

Related Questions