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


  • 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


    To Hide


    Complete Code

    <!DOCTYPE html>
      <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>
      $(document).ready(function() {
        $("#btnopen").click(function() {
        $("#btnClose").click(function() {
      <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 class="modal-body">
            <p>Some text in the modal.</p>
          <div class="modal-footer">
            <input type="submit"  class="btn btn-default"  Value="Close Dialog" id="btnClose"/>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 23, 2016 7:21 PM