ਮਾਡਲ
ਲਾਈਟਬਾਕਸ, ਉਪਭੋਗਤਾ ਸੂਚਨਾਵਾਂ, ਜਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਸਟਮ ਸਮੱਗਰੀ ਲਈ ਆਪਣੀ ਸਾਈਟ ਵਿੱਚ ਡਾਇਲਾਗ ਜੋੜਨ ਲਈ ਬੂਟਸਟਰੈਪ ਦੇ JavaScript ਮਾਡਲ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਕਿਦਾ ਚਲਦਾ
ਬੂਟਸਟਰੈਪ ਦੇ ਮਾਡਲ ਕੰਪੋਨੈਂਟ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਹੇਠਾਂ ਦਿੱਤੇ ਨੂੰ ਪੜ੍ਹਨਾ ਯਕੀਨੀ ਬਣਾਓ ਕਿਉਂਕਿ ਸਾਡੇ ਮੀਨੂ ਵਿਕਲਪ ਹਾਲ ਹੀ ਵਿੱਚ ਬਦਲ ਗਏ ਹਨ।
- ਮਾਡਲ HTML, CSS, ਅਤੇ JavaScript ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ। ਉਹ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਬਾਕੀ ਸਭ ਕੁਝ ਉੱਤੇ ਸਥਿਤ ਹਨ ਅਤੇ ਇਸ ਤੋਂ ਸਕ੍ਰੌਲ ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹਨ
<body>
ਤਾਂ ਜੋ ਇਸ ਦੀ ਬਜਾਏ ਮਾਡਲ ਸਮੱਗਰੀ ਸਕ੍ਰੌਲ ਹੋ ਸਕੇ। - ਮਾਡਲ "ਬੈਕਡ੍ਰੌਪ" 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਮਾਡਲ ਆਪਣੇ ਆਪ ਬੰਦ ਹੋ ਜਾਵੇਗਾ।
- ਬੂਟਸਟਰੈਪ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸਿਰਫ ਇੱਕ ਮਾਡਲ ਵਿੰਡੋ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਨੇਸਟਡ ਮੋਡਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ ਕਿਉਂਕਿ ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਮਾੜੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਮੰਨਦੇ ਹਾਂ।
- ਮਾਡਲਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ
position: fixed
, ਜੋ ਕਈ ਵਾਰ ਇਸਦੀ ਰੈਂਡਰਿੰਗ ਬਾਰੇ ਥੋੜਾ ਖਾਸ ਹੋ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਦੂਜੇ ਤੱਤਾਂ ਤੋਂ ਸੰਭਾਵੀ ਦਖਲ ਤੋਂ ਬਚਣ ਲਈ ਆਪਣੇ ਮਾਡਲ HTML ਨੂੰ ਉੱਚ-ਪੱਧਰੀ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖੋ। ਤੁਹਾਨੂੰ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ.modal
ਕਿਸੇ ਹੋਰ ਸਥਿਰ ਤੱਤ ਦੇ ਅੰਦਰ ਆਲ੍ਹਣਾ ਬਣਾਉਣ ਵੇਲੇ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਵੇਗਾ। - ਇੱਕ ਵਾਰ ਫਿਰ, ਦੇ ਕਾਰਨ
position: fixed
, ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਨਾਲ ਕੁਝ ਚੇਤਾਵਨੀਆਂ ਹਨ. ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ । - HTML5 ਆਪਣੇ ਅਰਥ ਵਿਗਿਆਨ ਨੂੰ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, HTML
autofocus
ਗੁਣ ਦਾ ਬੂਟਸਟਰੈਪ ਮਾਡਲਾਂ ਵਿੱਚ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਉਸੇ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਕੁਝ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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-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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-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>
ਵੱਖ-ਵੱਖ ਮਾਡਲ ਸਮੱਗਰੀ
ਕੀ ਤੁਹਾਡੇ ਕੋਲ ਬਟਨਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੈ ਜੋ ਥੋੜੀ ਵੱਖਰੀ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਇੱਕੋ ਮਾਡਲ ਨੂੰ ਚਾਲੂ ਕਰਦੇ ਹਨ? ਮਾਡਲ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਵੱਖ-ਵੱਖ ਕਰਨ ਲਈ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਸੰਭਵ ਤੌਰ ' ਤੇ jQuery ਰਾਹੀਂ ) ਦੀ ਵਰਤੋਂ ਕਰੋ event.relatedTarget
ਅਤੇ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜਾ ਬਟਨ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਸੀ।data-*
ਹੇਠਾਂ HTML ਅਤੇ JavaScript ਉਦਾਹਰਨ ਦੇ ਬਾਅਦ ਇੱਕ ਲਾਈਵ ਡੈਮੋ ਹੈ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, 'ਤੇ ਵੇਰਵਿਆਂ ਲਈ ਮਾਡਲ ਇਵੈਂਟ ਦਸਤਾਵੇਜ਼relatedTarget
ਪੜ੍ਹੋ ।
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
ਐਨੀਮੇਸ਼ਨ ਬਦਲੋ
ਵੇਰੀਏਬਲ ਮੋਡਲ ਫੇਡ-ਇਨ ਐਨੀਮੇਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ $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').modal('handleUpdate')
ਸਕ੍ਰੋਲਬਾਰ ਦਿਖਾਈ ਦੇਣ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਮਾਡਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਮੁੜ-ਅਵਸਥਾ ਕਰਨ ਲਈ ਕਾਲ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
ਪਹੁੰਚਯੋਗਤਾ
aria-labelledby="..."
ਮਾਡਲ ਸਿਰਲੇਖ ਦਾ ਹਵਾਲਾ ਦਿੰਦੇ ਹੋਏ, ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ .modal
। aria-describedby
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ on ਨਾਲ ਆਪਣੇ ਮਾਡਲ ਡਾਇਲਾਗ ਦਾ ਵੇਰਵਾ ਦੇ ਸਕਦੇ ਹੋ .modal
। ਨੋਟ ਕਰੋ ਕਿ ਤੁਹਾਨੂੰ ਜੋੜਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ role="dialog"
ਕਿਉਂਕਿ ਅਸੀਂ ਇਸਨੂੰ ਪਹਿਲਾਂ ਹੀ JavaScript ਰਾਹੀਂ ਜੋੜਦੇ ਹਾਂ।
YouTube ਵੀਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ
ਮੋਡਲਾਂ ਵਿੱਚ YouTube ਵਿਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਲਈ ਵਾਧੂ JavaScript ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਨਾ ਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪਲੇਬੈਕ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬੰਦ ਕਰਨ ਲਈ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਇਹ ਮਦਦਗਾਰ ਸਟੈਕ ਓਵਰਫਲੋ ਪੋਸਟ ਦੇਖੋ ।
ਵਿਕਲਪਿਕ ਆਕਾਰ
ਮਾਡਲਾਂ ਦੇ ਤਿੰਨ ਵਿਕਲਪਿਕ ਆਕਾਰ ਹੁੰਦੇ ਹਨ, ਜੋ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਰਾਹੀਂ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ .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>
ਵਰਤੋਂ
ਮਾਡਲ ਪਲੱਗਇਨ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ, ਮੰਗ 'ਤੇ ਤੁਹਾਡੀ ਲੁਕੀ ਹੋਈ ਸਮੱਗਰੀ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਇਹ ਡਿਫੌਲਟ ਸਕ੍ਰੋਲਿੰਗ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ .modal-open
ਲਈ ਵੀ ਜੋੜਦਾ ਹੈ ਅਤੇ ਮਾਡਲ ਤੋਂ ਬਾਹਰ ਕਲਿੱਕ ਕਰਨ ਵੇਲੇ ਦਿਖਾਏ ਗਏ ਮਾਡਲਾਂ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਇੱਕ ਕਲਿੱਕ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਇੱਕ ਬਣਾਉਂਦਾ ਹੈ।<body>
.modal-backdrop
ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ
JavaScript ਲਿਖੇ ਬਿਨਾਂ ਇੱਕ ਮਾਡਲ ਨੂੰ ਸਰਗਰਮ ਕਰੋ। data-toggle="modal"
ਇੱਕ ਕੰਟਰੋਲਰ ਤੱਤ 'ਤੇ ਸੈੱਟ ਕਰੋ , ਜਿਵੇਂ ਕਿ ਇੱਕ ਬਟਨ, ਇੱਕ ਦੇ ਨਾਲ data-target="#foo"
ਜਾਂ href="#foo"
ਟੌਗਲ ਕਰਨ ਲਈ ਇੱਕ ਖਾਸ ਮਾਡਲ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਣ ਲਈ।
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScript ਰਾਹੀਂ
myModal
JavaScript ਦੀ ਇੱਕ ਲਾਈਨ ਨਾਲ id ਦੇ ਨਾਲ ਇੱਕ ਮਾਡਲ ਨੂੰ ਕਾਲ ਕਰੋ :
$('#myModal').modal(options)
ਵਿਕਲਪ
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-backdrop=""
।
ਨਾਮ | ਟਾਈਪ ਕਰੋ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਪਿਛੋਕੜ | ਬੂਲੀਅਨ ਜਾਂ ਸਤਰ'static' |
ਸੱਚ ਹੈ | ਇੱਕ ਮਾਡਲ-ਬੈਕਡ੍ਰੌਪ ਤੱਤ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ, static ਇੱਕ ਬੈਕਡ੍ਰੌਪ ਲਈ ਨਿਸ਼ਚਿਤ ਕਰੋ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਨਹੀਂ ਕਰਦਾ ਹੈ। |
ਕੀਬੋਰਡ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਐਸਕੇਪ ਕੁੰਜੀ ਦਬਾਉਣ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ |
ਫੋਕਸ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਸ਼ੁਰੂਆਤੀ ਹੋਣ 'ਤੇ ਮਾਡਲ 'ਤੇ ਫੋਕਸ ਕਰਦਾ ਹੈ। |
ਦਿਖਾਓ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਸ਼ੁਰੂਆਤੀ ਹੋਣ 'ਤੇ ਮਾਡਲ ਦਿਖਾਉਂਦਾ ਹੈ। |
ਢੰਗ
ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ
ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
.modal(options)
ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਮਾਡਲ ਵਜੋਂ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ object
।
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
ਇੱਕ ਮਾਡਲ ਨੂੰ ਹੱਥੀਂ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ shown.bs.modal
ਜਾਂ hidden.bs.modal
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
$('#myModal').modal('toggle')
.modal('show')
ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਖੋਲ੍ਹਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.modal
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
$('#myModal').modal('show')
.modal('hide')
ਹੱਥੀਂ ਇੱਕ ਮਾਡਲ ਲੁਕਾਉਂਦਾ ਹੈ। ਮਾਡਲ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.modal
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
$('#myModal').modal('hide')
.modal('handleUpdate')
ਮੋਡਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਮੈਨੂਅਲੀ ਰੀਡਜਸਟ ਕਰੋ ਜੇਕਰ ਇੱਕ ਮੋਡਲ ਦੀ ਉਚਾਈ ਜਦੋਂ ਇਹ ਖੁੱਲੀ ਹੁੰਦੀ ਹੈ ਬਦਲਦੀ ਹੈ (ਭਾਵ ਜੇਕਰ ਇੱਕ ਸਕ੍ਰੌਲਬਾਰ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ)।
$('#myModal').modal('handleUpdate')
.modal('dispose')
ਕਿਸੇ ਤੱਤ ਦੇ ਮਾਡਲ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।
ਸਮਾਗਮ
ਬੂਟਸਟਰੈਪ ਦੀ ਮਾਡਲ ਕਲਾਸ ਮਾਡਲ ਫੰਕਸ਼ਨੈਲਿਟੀ ਨੂੰ ਜੋੜਨ ਲਈ ਕੁਝ ਘਟਨਾਵਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਦੀ ਹੈ। ਸਾਰੀਆਂ ਮਾਡਲ ਇਵੈਂਟਾਂ ਨੂੰ ਮਾਡਲ 'ਤੇ ਹੀ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ (ਭਾਵ 'ਤੇ <div class="modal">
)।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.modal | ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਇੱਕ ਕਲਿੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਤੱਤ relatedTarget ਘਟਨਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਜੋਂ ਉਪਲਬਧ ਹੁੰਦਾ ਹੈ। |
ਦਿਖਾਇਆ ਗਿਆ.bs.modal | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। ਜੇਕਰ ਇੱਕ ਕਲਿੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਤੱਤ relatedTarget ਘਟਨਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਜੋਂ ਉਪਲਬਧ ਹੁੰਦਾ ਹੈ। |
hide.bs.modal | ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
hidden.bs.modal | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਾਉਣਾ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
hidePrevented.bs.modal | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ, ਇਸਦਾ ਬੈਕਡ੍ਰੌਪ ਹੁੰਦਾ ਹੈ static ਅਤੇ ਮਾਡਲ ਦੇ ਬਾਹਰ ਇੱਕ ਕਲਿੱਕ ਜਾਂ ਕੀਬੋਰਡ ਵਿਕਲਪ ਨਾਲ ਇੱਕ ਐਸਕੇਪ ਕੁੰਜੀ ਦਬਾਇਆ ਜਾਂਦਾ ਹੈ ਜਾਂ data-keyboard ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ false । |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})