स्क्रॉल होने वाला Modal
एक scrollable modal इसके header और footer को fixed रखता है जबकि सिर्फ body scroll करता है।
In this page:
Syntax
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">...</div>
</div>Scrollable Modal
dialog में .modal-dialog-scrollable add करें ताकि लंबा content body के अंदर scroll हो। इसके बिना, पूरा modal page के साथ scroll करता है। इसे terms of service और लंबे forms के लिए इस्तेमाल करें।
Note:
जब उचित हो modal-dialog-scrollable को modal-dialog-centered से combine करें।
उदाहरण: Scrollable modal
<!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-outline-secondary" data-bs-toggle="modal" data-bs-target="#long">Scrollable modal</button>
<div class="modal fade" id="long" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title">Terms</h5></div>
<div class="modal-body"><p>Very long text... </p><p style="height:600px">Tall content that scrolls inside the body.</p><p>The end.</p></div>
<div class="modal-footer"><button class="btn btn-primary" data-bs-dismiss="modal">Accept</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. #}
आम गलतियां
- class भूल जाना ताकि page scroll करे
- बिना scroll के बहुत tall content
- Scroll areas को nest करना
चैप्टर सारांश
- modal-dialog-scrollable class चाहिए
- Header और footer fixed रहते हैं
- सिर्फ body scroll करता है
- लंबे text के लिए अच्छा
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: