Негізгі мазмұнға өту Құжаттар шарлауына өту
in English

Модаль

Жарық жәшіктері, пайдаланушы хабарландырулары немесе толығымен реттелетін мазмұн үшін сайтыңызға диалогтар қосу үшін Bootstrap JavaScript модальды плагинін пайдаланыңыз.

Бұл бетте

Бұл қалай жұмыс істейді

Bootstrap модальды құрамдас бөлігімен жұмысты бастамас бұрын, мәзір опциялары жақында өзгергендіктен, төмендегіні оқып шығыңыз.

  • Модальдер HTML, CSS және JavaScript көмегімен жасалған. Олар құжаттағы барлық басқа нәрселердің үстіне орналастырылады және оның <body>орнына модальды мазмұн айналдыру үшін айналдыруды алып тастайды.
  • Модальды «фон» түймесін басу модальды автоматты түрде жабады.
  • Bootstrap бір уақытта тек бір модальды терезені қолдайды. Кірістірілген модальдарға қолдау көрсетілмейді, өйткені олар нашар пайдаланушы тәжірибесі деп есептейміз.
  • Модальдар position: fixedкейде оны көрсетуге қатысты ерекше болуы мүмкін дегенді пайдаланады. Мүмкіндігінше, басқа элементтердің ықтимал кедергілерін болдырмау үшін модальды HTML-ді жоғарғы деңгейге қойыңыз. .modalБасқа бекітілген элементке кірістіру кезінде мәселелерге тап болуыңыз мүмкін .
  • Мобильді құрылғыларда модальдарды пайдалану кезінде тағы position: fixedда бірнеше ескертулер бар. Толық ақпаратты шолғышты қолдау құжаттарын қараңыз.
  • HTML5 өзінің семантикасын қалай анықтайтынына байланысты HTML autofocusтөлсипаты 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" data-bs-dismiss="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" data-bs-dismiss="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-describedbyon арқылы бере аласыз .modal. role="dialog"Біз оны JavaScript арқылы қосып қойғандықтан , қосудың қажеті жоқ екенін ескеріңіз .

YouTube бейнелерін ендіру

YouTube бейнелерін модальдарға ендіру үшін ойнатуды автоматты түрде тоқтату және т.б. үшін Bootstrap қолданбасында емес қосымша JavaScript қажет. Қосымша ақпарат алу үшін осы пайдалы 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>

Толық экран модалы

Тағы бір қайта анықтау - пайдаланушының қарау терезесін қамтитын модальді ашу опциясы, оларда орналастырылған модификатор сыныптары арқылы қол жетімді .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);
      }
    }
  }
}

Қолданылуы

Модальды плагин сұрау бойынша деректер атрибуттары немесе JavaScript арқылы жасырын мазмұнды ауыстырады. Ол сондай-ақ әдепкі айналдыру әрекетін қайта анықтайды және .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>

JavaScript арқылы

JavaScript бір жолымен модальды жасаңыз:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-bs-сияқты қосыңыз data-bs-backdrop="".

Аты Түр Әдепкі Сипаттама
backdrop логикалық немесе жол'static' true Модаль-фон элементін қамтиды. Немесе, staticшерткенде модальды жаппайтын фон үшін көрсетіңіз.
keyboard логикалық true Escape пернесі басылғанда модальды жабады
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()

өңдеуді жаңарту

Модалдың биіктігі ашық болған кезде өзгерсе (яғни айналдыру жолағы пайда болған жағдайда) модаль орнын қолмен қайта реттеңіз.

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және модальдан тыс шерту немесе escape пернесін басу пернетақта опциясымен орындалғанда немесе data-bs-keyboardпараметріне орнатылғанда іске қосылады false. 
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})