Bootstrap dialog box in Bootstrap

How to open a dialog box using javascript in Bootstrap?

Modal with javascript

We can open the modal dialog box not only using data-attributes but also we can use javascript to open a modal

<body>
    <div class="container">
        <h2>Modal using javascript</h2>
        <button type="button" class="btn btn-info btn-lg" id="myBtn">Click</button>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal with header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Modal in body</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $("#myBtn").click(function () {
                $("#myModal").modal();
            });
        });
    </script>
</body>

In the above code snippet we have defined how to open a modal, we have created button with class value as btn-info with id as mybtn, we created modal to that button by giving id as myModal
In the next line we are having the div element with modal-dialog with modal content, in the header of the modal we have text using <h4> and we have another div with class value as modal body which defines the center of the modal
In the last step we have class value as modal-footer in the div element, we created button in the footer to close the modal
In the next step we have the script function to define the button and modal we have #myBtn to click function of the button and #myModal to open the modal when the button is clicked

output

Views: 5696 | Post Order: 53

Bootstrap > Modals

Bootstrap dialog box in Bootstrap

How to open a dialog box using javascript in Bootstrap?

Modal with javascript

Related Posts

Utility Tools