ಮಾದರಿ
ಲೈಟ್ಬಾಕ್ಸ್ಗಳು, ಬಳಕೆದಾರರ ಅಧಿಸೂಚನೆಗಳು ಅಥವಾ ಸಂಪೂರ್ಣವಾಗಿ ಕಸ್ಟಮ್ ವಿಷಯಕ್ಕಾಗಿ ನಿಮ್ಮ ಸೈಟ್ಗೆ ಸಂವಾದಗಳನ್ನು ಸೇರಿಸಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿ ಪ್ಲಗಿನ್ ಬಳಸಿ.
ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಮಾದರಿ ಘಟಕದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ನಮ್ಮ ಮೆನು ಆಯ್ಕೆಗಳು ಇತ್ತೀಚೆಗೆ ಬದಲಾಗಿರುವುದರಿಂದ ಕೆಳಗಿನದನ್ನು ಓದಲು ಮರೆಯದಿರಿ.
- ಮಾದರಿಗಳನ್ನು HTML, CSS ಮತ್ತು JavaScript ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿರುವ ಎಲ್ಲದರ ಮೇಲೆ ಅವು ಸ್ಥಾನ ಪಡೆದಿವೆ ಮತ್ತು
<body>
ಮಾದರಿ ವಿಷಯ ಸ್ಕ್ರಾಲ್ ಆಗುವಂತೆ ಸ್ಕ್ರಾಲ್ನಿಂದ ಸ್ಕ್ರಾಲ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ. - ಮೋಡಲ್ "ಬ್ಯಾಕ್ಡ್ರಾಪ್" ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮೋಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ.
- ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಒಂದು ಸಮಯದಲ್ಲಿ ಒಂದು ಮಾದರಿ ವಿಂಡೋವನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತದೆ. ನೆಸ್ಟೆಡ್ ಮಾಡಲ್ಗಳು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಗಳೆಂದು ನಾವು ನಂಬಿರುವುದರಿಂದ ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
- ಮೋಡಲ್ಗಳು ಬಳಸುತ್ತವೆ
position: fixed
, ಇದು ಕೆಲವೊಮ್ಮೆ ಅದರ ರೆಂಡರಿಂಗ್ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ನಿರ್ದಿಷ್ಟವಾಗಿರುತ್ತದೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಇತರ ಅಂಶಗಳಿಂದ ಸಂಭಾವ್ಯ ಹಸ್ತಕ್ಷೇಪವನ್ನು ತಪ್ಪಿಸಲು ನಿಮ್ಮ ಮಾದರಿ HTML ಅನ್ನು ಉನ್ನತ ಮಟ್ಟದ ಸ್ಥಾನದಲ್ಲಿ ಇರಿಸಿ..modal
ಮತ್ತೊಂದು ಸ್ಥಿರ ಅಂಶದೊಳಗೆ ಗೂಡುಕಟ್ಟಿದಾಗ ನೀವು ಸಮಸ್ಯೆಗಳಿಗೆ ಸಿಲುಕಬಹುದು . - ಮತ್ತೊಮ್ಮೆ, ಕಾರಣ
position: fixed
, ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಮಾದರಿಗಳನ್ನು ಬಳಸುವುದರೊಂದಿಗೆ ಕೆಲವು ಎಚ್ಚರಿಕೆಗಳಿವೆ. ವಿವರಗಳಿಗಾಗಿ ನಮ್ಮ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ. - HTML5 ಅದರ ಶಬ್ದಾರ್ಥವನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ ಎಂಬ ಕಾರಣದಿಂದಾಗಿ ,
autofocus
HTML ಗುಣಲಕ್ಷಣವು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಮಾದರಿಗಳಲ್ಲಿ ಯಾವುದೇ ಪರಿಣಾಮವನ್ನು ಬೀರುವುದಿಲ್ಲ. ಅದೇ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು, ಕೆಲವು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
ಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಮ್ಮ ಪ್ರವೇಶಿಸುವಿಕೆ ದಸ್ತಾವೇಜನ್ನು ಕಡಿಮೆ ಚಲನೆಯ ವಿಭಾಗವನ್ನು ನೋಡಿ
.
ಡೆಮೊಗಳು ಮತ್ತು ಬಳಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳಿಗಾಗಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.
ಉದಾಹರಣೆಗಳು
ಮಾದರಿ ಘಟಕಗಳು
ಕೆಳಗೆ ಒಂದು ಸ್ಥಿರ ಮಾದರಿ ಉದಾಹರಣೆಯಾಗಿದೆ (ಅದರ ಅರ್ಥ position
ಮತ್ತು display
ಅತಿಕ್ರಮಿಸಲಾಗಿದೆ). ಮಾಡಲ್ ಹೆಡರ್, ಮಾದರಿ ದೇಹ (ಅಗತ್ಯವಿದೆ padding
) ಮತ್ತು ಮಾದರಿ ಅಡಿಟಿಪ್ಪಣಿ (ಐಚ್ಛಿಕ) ಸೇರಿವೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ವಜಾಗೊಳಿಸುವ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಮಾದರಿ ಹೆಡರ್ಗಳನ್ನು ಸೇರಿಸಲು ಅಥವಾ ಇನ್ನೊಂದು ಸ್ಪಷ್ಟವಾದ ವಜಾಗೊಳಿಸುವ ಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುವಂತೆ ನಾವು ಕೇಳುತ್ತೇವೆ.
<div class="modal" 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" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
ಲೈವ್ ಡೆಮೊ
ಕೆಳಗಿನ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ವರ್ಕಿಂಗ್ ಮಾಡಲ್ ಡೆಮೊವನ್ನು ಟಾಗಲ್ ಮಾಡಿ. ಇದು ಕೆಳಗೆ ಸ್ಲೈಡ್ ಆಗುತ್ತದೆ ಮತ್ತು ಪುಟದ ಮೇಲ್ಭಾಗದಿಂದ ಮಸುಕಾಗುತ್ತದೆ.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
ಸ್ಥಿರ ಹಿನ್ನೆಲೆ
ಬ್ಯಾಕ್ಡ್ರಾಪ್ ಅನ್ನು ಸ್ಥಿರವಾಗಿ ಹೊಂದಿಸಿದಾಗ, ಅದರ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಮೋಡಲ್ ಮುಚ್ಚುವುದಿಲ್ಲ. ಇದನ್ನು ಪ್ರಯತ್ನಿಸಲು ಕೆಳಗಿನ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
ದೀರ್ಘ ವಿಷಯವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಬಳಕೆದಾರರ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅಥವಾ ಸಾಧನಕ್ಕೆ ಮಾದರಿಗಳು ತುಂಬಾ ಉದ್ದವಾದಾಗ, ಅವರು ಪುಟದಿಂದ ಸ್ವತಂತ್ರವಾಗಿ ಸ್ಕ್ರಾಲ್ ಮಾಡುತ್ತಾರೆ. ನಾವು ಏನನ್ನು ಅರ್ಥೈಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ನೋಡಲು ಕೆಳಗಿನ ಡೆಮೊವನ್ನು ಪ್ರಯತ್ನಿಸಿ.
.modal-dialog-scrollable
ಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಮೋಡಲ್ ದೇಹವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಮೋಡಲ್ ಅನ್ನು ಸಹ ನೀವು ರಚಿಸಬಹುದು .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
ಲಂಬವಾಗಿ ಕೇಂದ್ರೀಕೃತವಾಗಿದೆ
.modal-dialog-centered
ಮೋಡಲ್ ಅನ್ನು .modal-dialog
ಲಂಬವಾಗಿ ಮಧ್ಯಕ್ಕೆ ಸೇರಿಸಿ .
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
ಟೂಲ್ಟಿಪ್ಸ್ ಮತ್ತು ಪಾಪೋವರ್ಸ್
ಟೂಲ್ಟಿಪ್ಗಳು ಮತ್ತು ಪಾಪೋವರ್ಗಳನ್ನು ಅಗತ್ಯವಿರುವಂತೆ ಮಾದರಿಗಳಲ್ಲಿ ಇರಿಸಬಹುದು. ಮೋಡಲ್ಗಳನ್ನು ಮುಚ್ಚಿದಾಗ, ಯಾವುದೇ ಟೂಲ್ಟಿಪ್ಗಳು ಮತ್ತು ಪಾಪೋವರ್ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
ಗ್ರಿಡ್ ಅನ್ನು ಬಳಸುವುದು
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಮಾದರಿಯೊಳಗೆ ಗೂಡುಕಟ್ಟುವ .container-fluid
ಮೂಲಕ ಬಳಸಿಕೊಳ್ಳಿ .modal-body
. ನಂತರ, ನೀವು ಬೇರೆಲ್ಲಿಯಾದರೂ ಸಾಮಾನ್ಯ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
ಬದಲಾಗುತ್ತಿರುವ ಮಾದರಿ ವಿಷಯ
ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ವಿಷಯಗಳೊಂದಿಗೆ ಒಂದೇ ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸುವ ಬಟನ್ಗಳ ಗುಂಪನ್ನು ಹೊಂದಿರುವಿರಾ? ಯಾವ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲಾಗಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಮೋಡಲ್ನ ವಿಷಯಗಳನ್ನು ಬದಲಿಸಲು event.relatedTarget
ಮತ್ತು HTML data-bs-*
ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ .
HTML ಮತ್ತು JavaScript ಅನ್ನು ಅನುಸರಿಸಿ ಲೈವ್ ಡೆಮೊ ಕೆಳಗೆ ಇದೆ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ, ವಿವರಗಳಿಗಾಗಿ ಮಾದರಿ ಈವೆಂಟ್ಗಳ ಡಾಕ್ಸ್ ಅನ್ನು ಓದಿrelatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
ಮಾದರಿಗಳ ನಡುವೆ ಟಾಗಲ್ ಮಾಡಿ
data-bs-target
ಮತ್ತು data-bs-toggle
ಗುಣಲಕ್ಷಣಗಳ ಕೆಲವು ಬುದ್ಧಿವಂತ ನಿಯೋಜನೆಯೊಂದಿಗೆ ಬಹು ಮಾದರಿಗಳ ನಡುವೆ ಟಾಗಲ್ ಮಾಡಿ . ಉದಾಹರಣೆಗೆ, ನೀವು ಈಗಾಗಲೇ ತೆರೆದಿರುವ ಸೈನ್ ಇನ್ ಮಾಡಲ್ನಿಂದ ಪಾಸ್ವರ್ಡ್ ಮರುಹೊಂದಿಸುವ ಮಾದರಿಯನ್ನು ಟಾಗಲ್ ಮಾಡಬಹುದು. ಒಂದೇ ಸಮಯದಲ್ಲಿ ಬಹು ಮಾದರಿಗಳನ್ನು ತೆರೆಯಲಾಗುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ - ಈ ವಿಧಾನವು ಎರಡು ಪ್ರತ್ಯೇಕ ಮಾದರಿಗಳ ನಡುವೆ ಸರಳವಾಗಿ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
ಅನಿಮೇಷನ್ ಬದಲಾಯಿಸಿ
ವೇರಿಯೇಬಲ್ ಮಾಡಲ್ ಫೇಡ್-ಇನ್ ಅನಿಮೇಷನ್ನ ಮೊದಲು $modal-fade-transform
ರೂಪಾಂತರ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ, ವೇರಿಯಬಲ್ ಮೋಡಲ್ ಫೇಡ್-ಇನ್ ಅನಿಮೇಷನ್ನ ಕೊನೆಯಲ್ಲಿ ರೂಪಾಂತರವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ ..modal-dialog
$modal-show-transform
.modal-dialog
ನೀವು ಉದಾಹರಣೆಗೆ ಜೂಮ್-ಇನ್ ಅನಿಮೇಷನ್ ಬಯಸಿದರೆ, ನೀವು ಹೊಂದಿಸಬಹುದು $modal-fade-transform: scale(.8)
.
ಅನಿಮೇಷನ್ ತೆಗೆದುಹಾಕಿ
ವೀಕ್ಷಿಸಲು ಮಸುಕಾಗುವ ಬದಲು ಸರಳವಾಗಿ ಗೋಚರಿಸುವ ಮಾದರಿಗಳಿಗಾಗಿ, .fade
ನಿಮ್ಮ ಮೋಡಲ್ ಮಾರ್ಕ್ಅಪ್ನಿಂದ ವರ್ಗವನ್ನು ತೆಗೆದುಹಾಕಿ.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
ಡೈನಾಮಿಕ್ ಎತ್ತರಗಳು
ಮೋಡಲ್ ತೆರೆದಿರುವಾಗ ಅದರ ಎತ್ತರವು ಬದಲಾದರೆ, myModal.handleUpdate()
ಸ್ಕ್ರಾಲ್ಬಾರ್ ಕಾಣಿಸಿಕೊಂಡರೆ ಮೋಡಲ್ನ ಸ್ಥಾನವನ್ನು ಮರುಹೊಂದಿಸಲು ನೀವು ಕರೆ ಮಾಡಬೇಕು.
ಪ್ರವೇಶಿಸುವಿಕೆ
ಗೆ ಸೇರಿಸಲು ಮರೆಯದಿರಿ aria-labelledby="..."
, ಮಾದರಿ ಶೀರ್ಷಿಕೆಯನ್ನು ಉಲ್ಲೇಖಿಸಿ .modal
. aria-describedby
ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಲ್ಲಿ ನಿಮ್ಮ ಮಾದರಿ ಸಂವಾದದ ವಿವರಣೆಯನ್ನು ನೀವು ನೀಡಬಹುದು .modal
. role="dialog"
ನಾವು ಇದನ್ನು ಈಗಾಗಲೇ JavaScript ಮೂಲಕ ಸೇರಿಸಿರುವುದರಿಂದ ನೀವು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ ಎಂಬುದನ್ನು ಗಮನಿಸಿ .
YouTube ವೀಡಿಯೊಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಯೂಟ್ಯೂಬ್ ವೀಡಿಯೊಗಳನ್ನು ಮಾದರಿಗಳಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡಲು ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ಲೇಬ್ಯಾಕ್ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ನಿಲ್ಲಿಸಲು ಹೆಚ್ಚುವರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದೆ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಈ ಸಹಾಯಕವಾದ ಸ್ಟಾಕ್ ಓವರ್ಫ್ಲೋ ಪೋಸ್ಟ್ ಅನ್ನು ನೋಡಿ.
ಐಚ್ಛಿಕ ಗಾತ್ರಗಳು
ಮೋಡಲ್ಗಳು ಮೂರು ಐಚ್ಛಿಕ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿವೆ, ಎ ಮೇಲೆ ಇರಿಸಲು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳ ಮೂಲಕ ಲಭ್ಯವಿದೆ .modal-dialog
. ಕಿರಿದಾದ ವ್ಯೂಪೋರ್ಟ್ಗಳಲ್ಲಿ ಅಡ್ಡಲಾಗಿರುವ ಸ್ಕ್ರಾಲ್ಬಾರ್ಗಳನ್ನು ತಪ್ಪಿಸಲು ಈ ಗಾತ್ರಗಳು ಕೆಲವು ಬ್ರೇಕ್ಪಾಯಿಂಟ್ಗಳಲ್ಲಿ ಕಿಕ್ ಇನ್ ಆಗುತ್ತವೆ.
ಗಾತ್ರ | ವರ್ಗ | ಮಾದರಿ ಗರಿಷ್ಠ ಅಗಲ |
---|---|---|
ಚಿಕ್ಕದು | .modal-sm |
300px |
ಡೀಫಾಲ್ಟ್ | ಯಾವುದೂ | 500px |
ದೊಡ್ಡದು | .modal-lg |
800px |
ಹೆಚ್ಚುವರಿ ದೊಡ್ಡದು | .modal-xl |
1140px |
ಮಾರ್ಪಡಿಸುವ ವರ್ಗವಿಲ್ಲದ ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಮಾದರಿಯು "ಮಧ್ಯಮ" ಗಾತ್ರದ ಮಾದರಿಯನ್ನು ರೂಪಿಸುತ್ತದೆ.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
ಪೂರ್ಣಪರದೆ ಮಾದರಿ
ಮತ್ತೊಂದು ಅತಿಕ್ರಮಣವು ಬಳಕೆದಾರರ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಮೋಡಲ್ ಅನ್ನು ಪಾಪ್ ಅಪ್ ಮಾಡುವ ಆಯ್ಕೆಯಾಗಿದೆ, ಇದು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳ ಮೂಲಕ ಲಭ್ಯವಿದೆ .modal-dialog
.
ವರ್ಗ | ಲಭ್ಯತೆ |
---|---|
.modal-fullscreen |
ಯಾವಾಗಲೂ |
.modal-fullscreen-sm-down |
ಕೆಳಗೆ576px |
.modal-fullscreen-md-down |
ಕೆಳಗೆ768px |
.modal-fullscreen-lg-down |
ಕೆಳಗೆ992px |
.modal-fullscreen-xl-down |
ಕೆಳಗೆ1200px |
.modal-fullscreen-xxl-down |
ಕೆಳಗೆ1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
ಸಾಸ್
ಅಸ್ಥಿರ
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
ಲೂಪ್
ರೆಸ್ಪಾನ್ಸಿವ್ ಫುಲ್ಸ್ಕ್ರೀನ್ ಮಾದರಿಗಳನ್ನು$breakpoints
ನಕ್ಷೆ ಮತ್ತು ಲೂಪ್ ಮೂಲಕ ರಚಿಸಲಾಗಿದೆ scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
ಬಳಕೆ
ಮೋಡಲ್ ಪ್ಲಗಿನ್ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ನಿಮ್ಮ ಗುಪ್ತ ವಿಷಯವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಸ್ಕ್ರೋಲಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ ಮತ್ತು .modal-backdrop
ಮೋಡಲ್ನ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡುವಾಗ ತೋರಿಸಿರುವ ಮಾದರಿಗಳನ್ನು ವಜಾಗೊಳಿಸಲು ಕ್ಲಿಕ್ ಪ್ರದೇಶವನ್ನು ಒದಗಿಸಲು a ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ.
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ
ಟಾಗಲ್ ಮಾಡಿ
JavaScript ಬರೆಯದೆಯೇ ಮಾದರಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ. data-bs-toggle="modal"
ಒಂದು ಬಟನ್ನಂತಹ ನಿಯಂತ್ರಕ ಅಂಶದ ಮೇಲೆ ಹೊಂದಿಸಿ data-bs-target="#foo"
ಅಥವಾ href="#foo"
ಟಾಗಲ್ ಮಾಡಲು ನಿರ್ದಿಷ್ಟ ಮಾದರಿಯನ್ನು ಗುರಿಯಾಗಿಸಲು.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
ವಜಾಗೊಳಿಸಿ
ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಿದಂತೆ ಮಾದರಿಯೊಳಗಿನdata
ಬಟನ್ನಲ್ಲಿನ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ವಜಾಗೊಳಿಸುವಿಕೆಯನ್ನು ಸಾಧಿಸಬಹುದು :
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
ಅಥವಾ ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಿದಂತೆ ಮಾದರಿಯ ಹೊರಗಿನ ಬಟನ್ನಲ್ಲಿ :data-bs-target
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನ ಒಂದೇ ಸಾಲಿನೊಂದಿಗೆ ಮಾದರಿಯನ್ನು ರಚಿಸಿ:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
ಆಯ್ಕೆಗಳು
ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-bs-
, data-bs-backdrop=""
.
ಹೆಸರು | ಮಾದರಿ | ಡೀಫಾಲ್ಟ್ | ವಿವರಣೆ |
---|---|---|---|
backdrop |
ಬೂಲಿಯನ್ ಅಥವಾ ಸ್ಟ್ರಿಂಗ್'static' |
true |
ಮಾದರಿ-ಬ್ಯಾಕ್ಡ್ರಾಪ್ ಅಂಶವನ್ನು ಒಳಗೊಂಡಿದೆ. ಪರ್ಯಾಯವಾಗಿ, static ಕ್ಲಿಕ್ನಲ್ಲಿ ಮಾದರಿಯನ್ನು ಮುಚ್ಚದ ಹಿನ್ನೆಲೆಗಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿ. |
keyboard |
ಬೂಲಿಯನ್ | true |
ಎಸ್ಕೇಪ್ ಕೀಲಿಯನ್ನು ಒತ್ತಿದಾಗ ಮೋಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ |
focus |
ಬೂಲಿಯನ್ | true |
ಆರಂಭಿಸಿದಾಗ ಮಾದರಿಯ ಮೇಲೆ ಗಮನವನ್ನು ಇರಿಸುತ್ತದೆ. |
ವಿಧಾನಗಳು
ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು
ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .
ಹಾದುಹೋಗುವ ಆಯ್ಕೆಗಳು
ನಿಮ್ಮ ವಿಷಯವನ್ನು ಮಾದರಿಯಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
ಟಾಗಲ್
ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಅಥವಾ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.modal
hidden.bs.modal
myModal.toggle()
ತೋರಿಸು
ಹಸ್ತಚಾಲಿತವಾಗಿ ಒಂದು ಮಾದರಿಯನ್ನು ತೆರೆಯುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ನಿಜವಾಗಿ ತೋರಿಸುವುದಕ್ಕಿಂತ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.modal
myModal.show()
relatedTarget
ಅಲ್ಲದೆ, ಮಾದರಿ ಈವೆಂಟ್ಗಳಲ್ಲಿ ( ಆಸ್ತಿಯಂತೆ) ಸ್ವೀಕರಿಸಬಹುದಾದ ವಾದವಾಗಿ ನೀವು DOM ಅಂಶವನ್ನು ರವಾನಿಸಬಹುದು .
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
ಮರೆಮಾಡಿ
ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮರೆಮಾಡುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು ) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .hidden.bs.modal
myModal.hide()
ಹ್ಯಾಂಡಲ್ ಅಪ್ಡೇಟ್
ಮೋಡಲ್ ತೆರೆದಿರುವಾಗ ಅದರ ಎತ್ತರವು ಬದಲಾದರೆ (ಅಂದರೆ ಸ್ಕ್ರೋಲ್ಬಾರ್ ಕಾಣಿಸಿಕೊಂಡರೆ) ಹಸ್ತಚಾಲಿತವಾಗಿ ಮೋಡಲ್ನ ಸ್ಥಾನವನ್ನು ಮರುಹೊಂದಿಸಿ.
myModal.handleUpdate()
ವಿಲೇವಾರಿ ಮಾಡು
ಅಂಶದ ಮಾದರಿಯನ್ನು ನಾಶಪಡಿಸುತ್ತದೆ. (DOM ಅಂಶದಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ)
myModal.dispose()
ಪಡೆಯಿರಿ ನಿದರ್ಶನ
DOM ಅಂಶದೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ಮಾದರಿ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
DOM ಅಂಶದೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ಮಾದರಿ ನಿದರ್ಶನವನ್ನು ಪಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸ್ಥಿರ ವಿಧಾನ, ಅಥವಾ ಅದನ್ನು ಪ್ರಾರಂಭಿಸದಿದ್ದಲ್ಲಿ ಹೊಸದನ್ನು ರಚಿಸಿ
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
ಕಾರ್ಯಕ್ರಮಗಳು
ಬೂಟ್ಸ್ಟ್ರ್ಯಾಪ್ನ ಮಾದರಿ ವರ್ಗವು ಮೋಡಲ್ ಕಾರ್ಯನಿರ್ವಹಣೆಗೆ ಕೊಂಡಿಯಾಗಿರುವುದಕ್ಕಾಗಿ ಕೆಲವು ಘಟನೆಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ. ಎಲ್ಲಾ ಮಾದರಿ ಘಟನೆಗಳನ್ನು ಮಾದರಿಯಲ್ಲಿಯೇ (ಅಂದರೆ ನಲ್ಲಿ <div class="modal">
) ಹಾರಿಸಲಾಗುತ್ತದೆ.
ಈವೆಂಟ್ ಪ್ರಕಾರ | ವಿವರಣೆ |
---|---|
show.bs.modal |
show ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆಯುವಾಗ ಈ ಘಟನೆಯು ತಕ್ಷಣವೇ ಉರಿಯುತ್ತದೆ . ಒಂದು ಕ್ಲಿಕ್ನಿಂದ ಉಂಟಾಗಿದ್ದರೆ, ಕ್ಲಿಕ್ ಮಾಡಿದ ಅಂಶವು relatedTarget ಈವೆಂಟ್ನ ಆಸ್ತಿಯಾಗಿ ಲಭ್ಯವಿದೆ. |
shown.bs.modal |
ಮೋಡಲ್ ಅನ್ನು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ). ಒಂದು ಕ್ಲಿಕ್ನಿಂದ ಉಂಟಾಗಿದ್ದರೆ, ಕ್ಲಿಕ್ ಮಾಡಿದ ಅಂಶವು relatedTarget ಈವೆಂಟ್ನ ಆಸ್ತಿಯಾಗಿ ಲಭ್ಯವಿದೆ. |
hide.bs.modal |
hide ನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆ ಮಾಡಿದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ . |
hidden.bs.modal |
ಬಳಕೆದಾರರಿಂದ ಮೋಡಲ್ ಅನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ). |
hidePrevented.bs.modal |
ಮಾದರಿಯನ್ನು ತೋರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ, ಅದರ ಬ್ಯಾಕ್ಡ್ರಾಪ್ static ಮತ್ತು ಮೋಡಲ್ನ ಹೊರಗೆ ಒಂದು ಕ್ಲಿಕ್ ಅಥವಾ ಎಸ್ಕೇಪ್ ಕೀ ಪ್ರೆಸ್ ಅನ್ನು ಕೀಬೋರ್ಡ್ ಆಯ್ಕೆಯೊಂದಿಗೆ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ ಅಥವಾ data-bs-keyboard ಗೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})