Bootstrap > Modals

Modals in Bootstrap

How to open dialog box in a popup window using bootstrap


Modals

Modal is defined as the dialog box which is used to open the popup window

<h2>Bootstrap modal</h2>
   <a href="#" class="btn btn-success"data-target="#mymodal" data-toggle="modal">Click here</a>
    <div id="mymodal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" >&times;</button>
                    <h2>Welcome to TechFunda Tutorial    </h2>
                </div>
                <div class="modal-body">
                    <p>Bootstrap</p>
                    <p>JQuery</p>
                </div>
                <div class="modal-footer">
                    <span class="pull-left">Tutorials</span>
                    <button type="button" class="btn btn-success">HTML</button>
                    <button type="button" class="btn btn-warning">CSS</button>
                    <button type="button" class="btn btn-danger">JAVASCRIPT</button>
                </div>
            </div>
        </div>
    </div>
  • In the above code snippet we have defined the modal which opens a dialog box  popup window, we have created a button with link in the anchor tag with value click here  by using class attribute value as btn btn-success and data-target as #mymodal and data-toggle=modal 
  • In the next line we are having the div element with an Id which should be same as data-target attribute which should trigger the modal(mymodal) and class attribute value modal fade defines 
  • .modal class identifies the content of <div> as a modal and brings focus to it, .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.
  • In the next line we are having the modal-dialog which defines to set the proper width and margin of the modal.
  • In he next line we are having the modal-content which defines the inside function of the div such as header, body, footer
  • In the header section of the modal we have closing modal using class attribte value close and data-dismiss as modal and we have value in the header as Welcome to TechFunda Tutorial
  • In the next line we are having the modal-body with values as Bootstrap and JQuery
  • In the next line we are having the modal-footer to define the value, we used to <span> to define the value as Tutorial with class attribute value pull-left and after we created three buttons with class attribute values as btn-success, btn-warning and btn-danger with values HTML, CSS, JAVASCRIPT

output

After clicking the button it opens a dialog box in a popup window

 Views: 4532 | Post Order: 52



Write for us






Hosting Recommendations