Модаль
Bootstrap'ның JavaScript модаль плагинын кулланыгыз, сезнең сайтка яктырткычлар, кулланучы хәбәрләре яки тулысынча махсус эчтәлек өчен диалоглар өстәү.
Ничек бу эшли
Bootstrap'ның модаль компоненты белән башлар алдыннан, түбәндәгеләрне укыгыз, чөнки безнең меню вариантлары күптән түгел үзгәрде.
- Модальләр HTML, CSS һәм JavaScript белән төзелгән. Алар документтагы бүтәннәр өстендә урнашканнар һәм
<body>
модаль эчтәлек урынына әйләндерү өчен әйләндерүне алып куялар. - Модаль "фон" га басыгыз, модаль автоматик рәвештә ябылачак.
- Bootstrap берьюлы бер модаль тәрәзәгә ярдәм итә. Ояланган модальләр ярдәм итми, чөнки без аларны начар кулланучылар тәҗрибәсе дип саныйбыз.
- Модальләр куллану
position: fixed
, алар күрсәтү турында кайвакыт бераз аерылып торырга мөмкин. Мөмкин булганда, башка элементларның потенциаль комачаулавын булдырмас өчен, модаль HTML-ны югары дәрәҗәдәге позициягә урнаштырыгыз..modal
Башка тотрыклы элемент эчендә оя корганда сез, мөгаен, проблемаларга эләгерсез . - Тагын бер тапкыр, шуңа күрә
position: fixed
, мобиль җайланмаларда модаль куллану белән кайбер саклыклар бар. Детальләр өчен безнең браузер ярдәм документларын карагыз . - HTML5 аның семантикасын ничек билгеләгәнгә ,
autofocus
HTML атрибутының Bootstrap модалларында бернинди тәэсире юк. Шул ук эффектка ирешү өчен, кайбер JavaScript кулланыгыз:
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>
Челтәр куллану
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 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>
Анимацияне үзгәртү
Theзгәргеч модаль сүнгән анимация алдыннан үзгәрү $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 видеоларын урнаштыру
YouTube видеоларын модальләргә урнаштыру Bootstrap'та булмаган өстәмә JavaScript таләп итә, уйнауны автоматик рәвештә туктату һәм башкалар. Күбрәк мәгълүмат алу өчен бу файдалы Stack Overflow постын карагыз .
Ихтимал зурлыклар
Модальләрнең өч өстәмә зурлыгы бар, модификатор класслары аша a .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>
Тулы экран модалы
Тагын бер өстәмә язу - кулланучының күренешен каплаучы модальне ачу варианты, a урнаштырылган модификатор класслары аша .modal-dialog
.
Класс | Мөмкинлек |
---|---|
.modal-fullscreen |
Waysәрвакыт |
.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>
Сасс
Variзгәрешләр
$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);
Loop
Fullаваплы тулы экран модальләре$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);
}
}
}
}
Куллану
Модаль плагин сезнең яшерен эчтәлекне сорау буенча, мәгълүмат атрибутлары яки JavaScript аша алыштыра. Бу шулай ук килешү буенча әйләндерү тәртибен .modal-backdrop
кире кага һәм модаль читенә чыккач күрсәтелгән модальләрне кире кагу өчен басу өлкәсен тәэмин итә.
Мәгълүмат атрибутлары аша
Күчерү
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>
JavaScript аша
JavaScriptның бер сызыгы белән модаль ясагыз:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Вариантлар
Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-bs-
өстәгез data-bs-backdrop=""
.
Исем | Тип | Килешү | Тасвирлау |
---|---|---|---|
backdrop |
буле яки кыл'static' |
true |
Модаль-фон элементын үз эченә ала. Альтернатив рәвештә, static басу вакытында модальне япмаган фонны күрсәтегез. |
keyboard |
буле | true |
Качу ачкычы басылганда модальне япа |
focus |
буле | true |
Башланганда игътибарны модальгә куя. |
Методлар
Асинхрон ысуллар һәм күчү
Барлык API ысуллары да асинхрон һәм күчү башлый . Күчерелеш башлангач, ләкин ул беткәнче шалтыратучыга кире кайталар . Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .
Күбрәк мәгълүмат алу өчен безнең JavaScript документларын карагыз .
Вариантлар
Сезнең эчтәлекне модаль итеп активлаштыра. Өстәмә вариантларны кабул итә object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
күчү
Модальне кул белән алыштыра. Модаль күрсәтелгән яки яшерелгәнче (ягъни вакыйга булганчы) шалтыратучыга кире кайта.shown.bs.modal
hidden.bs.modal
myModal.toggle()
шоу
Кул белән модаль ачыла. Модаль күрсәтелгәнче шалтыратучыга кире кайта (ягъни shown.bs.modal
вакыйга булганчы).
myModal.show()
Шулай ук, сез DOM элементын аргумент буларак модаль вакыйгаларда кабул итә аласыз ( relatedTarget
милек буларак).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
яшер
Модальне кул белән яшерә. Модаль яшерелгәнче шалтыратучыга кире кайта (ягъни hidden.bs.modal
вакыйга булганчы).
myModal.hide()
HandUpdate
Әгәр дә модаль биеклеге ачык булганда үзгәрсә (ягъни әйләндерү тактасы барлыкка килгән очракта) модаль позициясен кул белән көйләгез.
myModal.handleUpdate()
утильләштерү
Элемент модалын җимерә. (DOM элементында сакланган мәгълүматны бетерә)
myModal.dispose()
getInstance
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
Вакыйгалар
Bootstrap'ның модаль классы модаль функциягә керү өчен берничә вакыйганы фаш итә. Барлык модаль вакыйгалар да модальнең үзендә (ягъни <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...
})