Bootstrap > Modals

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 

    <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 class="modal-body">
                        <p>Modal in body</p>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        $(document).ready(function () {
            $("#myBtn").click(function () {
  • 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



 Views: 397 | Post Order: 52

Write for us