გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
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">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-dialogfade-in ანიმაციამდე, $modal-show-transformცვლადი განსაზღვრავს ტრანსფორმაციას .modal-dialogმოდალური fade-in ანიმაციის ბოლოს.

თუ გსურთ, მაგალითად, მასშტაბის ანიმაცია, შეგიძლიათ დააყენოთ $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 ვიდეოების მოდალში ჩასმა მოითხოვს დამატებით 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>

სრულეკრანიანი მოდალური

კიდევ ერთი უგულებელყოფა არის მოდალის გახსნის ვარიანტი, რომელიც მოიცავს მომხმარებლის ხედვის პორტს, რომელიც ხელმისაწვდომია მოდიფიკატორის კლასების საშუალებით, რომლებიც განთავსებულია .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დაწკაპუნების ზონას მოდალის გარეთ დაწკაპუნებისას ნაჩვენები მოდალების გაუქმებისთვის.

მონაცემთა ატრიბუტების მეშვეობით

გადართვა

გაააქტიურეთ მოდალი 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>
მიუხედავად იმისა, რომ მოდალის გაუქმების ორივე გზა მხარდაჭერილია, გახსოვდეთ, რომ მოდალის გარედან გაუქმება არ ემთხვევა WAI-ARIA მოდალური დიალოგის დიზაინის შაბლონს . გააკეთეთ ეს საკუთარი რისკის ქვეშ.

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()

handleUpdate

ხელით შეცვალეთ მოდალის პოზიცია, თუ მოდალის სიმაღლე იცვლება მისი გახსნის დროს (ანუ იმ შემთხვევაში, თუ გადახვევის ზოლი გამოჩნდება).

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...
})