locked
How to show and hide bootstrap dialog by jquery RRS feed

  • Question

  • User264732274 posted
    How we can show and hide bootstrap dialog by jquery. Looking for some sample code.
    Tuesday, August 23, 2016 7:07 PM

Answers

  • User2103319870 posted

    You can use the Show and hide method in Bootstrap Modal popup to display and hide dialog window on button click

    To show

    $('#myModal').modal('show');

    To Hide

     $('#myModal').modal('hide');

    Complete Code

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#btnopen").click(function() {
          $('#myModal').modal('show');
        });
        
        $("#btnClose").click(function() {
          $('#myModal').modal('hide');
        });
      });
    </script>
    </head>
    <body>
    
      <input type="submit" Value="Open Dialog" id="btnopen"/>
       
      <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog" >
         <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <p>Some text in the modal.</p>
          </div>
          <div class="modal-footer">
            <input type="submit"  class="btn btn-default"  Value="Close Dialog" id="btnClose"/>
           
          </div>
        </div>
    
      </div>
    </div>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 23, 2016 7:21 PM