What is a modal window
A modal window in HTML is a dialog box or popup that appears on top of the current page, providing additional information or interaction. It’s commonly used for displaying messages, forms, or other content without navigating away from the main page. Here’s a basic example of how to create a modal using Bootstrap:
HTML
<a class="demo-open-window" href="#demoModalWindow" data-bs-toggle="modal">Demo</a>
HTML Modal
<div id="demoModalWindow" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Basic Page
Button alignment
Button styles
Button with icon Only
Button with text and icon on the left
Button with text and icon on the right
Content pagination
Include CSS and JS Files
Modal window
Popover
Popover with HTML content
Progress bars
Progress bars with tooltip
Popover with HTML content and a close button
Responsive cards
Responsive cards styled like business cards
Responsive cards styled like post-it notes
Responsive columns
Table
Table pagination with keyboard keys
Tabs
Tooltip
Tooltip with HTML content