Bootstrap > Modals

Bootstrap Modal box in Bootstrap

How to hide and show the modal using javascript in Bootstrap?


Modal show and hide

We can show the modal and hide the modal using javascript

 <style>
        #myBtn {
            width: 300px;
            padding: 10px;
            font-size: 20px;
            position: absolute;
            margin: 0 auto;
            right: 0;
            left: 0;
            bottom: 50px;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Modal Methods</h2>
        <button type="button" class="btn btn-info btn-md" id="myBtn">Hide Modal</button>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Methods</h4>
                    </div>
                    <div class="modal-body">
                        Displays content in the body
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success btn-lg">Modal footer</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $("#myModal").modal("show");
            $("#myBtn").click(function () {
                $("#myModal").modal("hide");
            });
        });
    </script>
</body>
  • In the above code snippet we have defined the modal method to show and hide the modal, we have created modal header, modal body, modal footer using button with class btn btn-info and id as myBtn and myModal
  • In the next line we have script function we have
  • $("#myModal").modal("show"); - It defaults shows the modal with dialog box and in the next linwe have   
  • $("#myBtn").click(function () { $("#myModal").modal("hide"); - which calls the button to click the function of the myModal to hide the modal 
  • In the next line we have the style sheet to define the button using #myBtn 

output

 Views: 4084 | Post Order: 54



Write for us






Hosting Recommendations