Modal Archives - Ebhor.com

Bootstrap Modal

June 29, 2020September 4, 2018 by manish

The Modal components are useful in situations like, when you need to bring the users attention to some message or a popup. These are basically dialog boxes/popup windows that are displayed on top of the page. Creating a Bootstrap Modal The code below illustrates how modals can be created using Bootstrap

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Open modal

</button>

<h4 class="modal-title">Modal Heading</h4>

</div>

Modal body..

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

</div>

Add animation in … Read more