Modal के Basics
एक modal एक dialog है जो page के ऊपर appear होता है और close होने तक interaction block करता है।
In this page:
Syntax
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-id">Open</button>
<div class="modal fade" id="modal-id" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">Title</div>
<div class="modal-body">Body</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>Modal Basics
header, body, और footer के साथ .modal-dialog, .modal-content वाला एक .modal बनाएँ। data-bs-toggle="modal" और data-bs-target वाला एक button इसे open करता है, और data-bs-dismiss="modal" इसे close करता है।
Accessibility के लिए tabindex="-1", aria-labelledby, और एक title add करें।
इसे JS bundle चाहिए।
Note:
Stacking issues से बचने के लिए modal markup को body के top level पर रखें।
उदाहरण: Modal basics
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demoModal">Launch modal</button>
<div class="modal fade" id="demoModal" tabindex="-1" aria-labelledby="demoTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title" id="demoTitle">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body">Modal body text goes here.</div>
<div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button class="btn btn-primary">Save changes</button></div>
</div>
</div>
</div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- target id missing होना
- tabindex और aria attributes भूल जाना
- fixed elements के अंदर modals nest करना
चैप्टर सारांश
- modal, modal-dialog, modal-content classes चाहिए
- data-bs-toggle और data-bs-target इसे खोलते हैं
- data-bs-dismiss इसे बंद करता है
- JS bundle चाहिए
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: