Модал
Васлкунаки модалии JavaScript-и Bootstrap-ро барои илова кардани муколамаҳо ба сайти худ барои қуттиҳои равшанӣ, огоҳиҳои корбар ё мундариҷаи комилан фармоишӣ истифода баред.
Он чӣ гуна кор мекунад
Пеш аз оғози кор бо ҷузъи модалии Bootstrap, боварӣ ҳосил кунед, ки зеринро хонед, зеро имконоти менюи мо ба наздикӣ тағир ёфтанд.
- Модалҳо бо HTML, CSS ва JavaScript сохта шудаанд. Онҳо дар болои ҳама чизи дигаре дар ҳуҷҷат ҷойгир шудаанд ва ҳаракатро аз он хориҷ кунед,
<body>
то мундариҷаи модалӣ ба ҷои он ҳаракат кунад. - Ангуштзании модали "замина" ба таври худкор модалиро мепӯшонад.
- Bootstrap дар як вақт танҳо як равзанаи модалиро дастгирӣ мекунад. Модалҳои дохилӣ дастгирӣ намешаванд, зеро мо боварӣ дорем, ки онҳо таҷрибаи ками корбаранд.
- Модалҳо истифода мебаранд
position: fixed
, ки баъзан метавонад дар бораи намоиши он каме мушаххас бошад. То ҳадди имкон, HTML модалии худро дар сатҳи боло ҷойгир кунед, то аз дахолати эҳтимолӣ аз дигар унсурҳо канорагирӣ кунед. Эҳтимол шумо ҳангоми ҷойгир кардани як.modal
элементи собит дигар ба мушкилот дучор мешавед. - Бори дигар, аз сабаби
position: fixed
, баъзе огоҳиҳо дар бораи истифодаи модальҳо дар дастгоҳҳои мобилӣ вуҷуд доранд. Барои тафсилот ба ҳуҷҷатҳои дастгирии браузери мо нигаред. - Аз сабаби он ки чӣ тавр HTML5 семантикаи худро муайян мекунад, атрибути
autofocus
HTML дар modalҳои Bootstrap ҳеҷ гуна таъсире надорад. Барои ноил шудан ба ҳамон таъсир, якчанд 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>
Истифодаи шабака
Истифодаи системаи шабакаи Bootstrap дар дохили модалӣ тавассути лона .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>
Мундариҷаи гуногуни моддӣ
Оё як даста тугмаҳо доред, ки ҳамаашон як модальро бо мундариҷаи каме фарқ мекунанд? Аттрибутҳо event.relatedTarget
ва HTML - data-*
ро (эҳтимолан тавассути jQuery ) истифода баред, то мундариҷаи модалро вобаста ба он ки тугмача пахш карда шудааст, тағир диҳед.
Дар зер намоиши зинда ва намунаи 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-и иловагиро талаб мекунад, ки на дар Bootstrap барои худкор қатъ кардани бозиҳо ва ғайра. Барои маълумоти бештар ба ин пости муфиди Stack Overflow нигаред.
Андозаҳои ихтиёрӣ
Модалҳо се андозаи ихтиёрӣ доранд, ки тавассути синфҳои тағирдиҳанда барои ҷойгир кардани .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
Модалро бо ID myModal
бо як сатри JavaScript занг занед:
$('#myModal').modal(options)
Имконот
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-
монанди замима кунед data-backdrop=""
.
Ном | Навъи | Пешфарз | Тавсифи |
---|---|---|---|
замина | булӣ ё сатр'static' |
дуруст | Унсури модаль-заминаро дар бар мегирад. Интихобан, static барои заминае муайян кунед, ки модальро бо клик намепӯшад. |
клавиатура | булӣ | дуруст | Вақте ки тугмаи escape пахш карда мешавад, модальро мепӯшонад |
тамаркуз | булӣ | дуруст | Ҳангоми оғозёбӣ таваҷҷӯҳро ба модаль мегузорад. |
нишон додан | булӣ | дуруст | Модалро ҳангоми оғозёбӣ нишон медиҳад. |
Усулҳо
Усулҳо ва гузаришҳои асинхронӣ
Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.
Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .
.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')
Модали элементро нест мекунад.
Ҳодисаҳо
Синфи модалии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи модалӣ фош мекунад. Ҳама рӯйдодҳои модалӣ ба худи модал (яъне дар <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...
})