Source

მოდალური

გამოიყენეთ Bootstrap-ის JavaScript მოდალური დანამატი, რომ დაამატოთ დიალოგები თქვენს საიტზე ლაითბოქსებისთვის, მომხმარებლის შეტყობინებებისთვის ან სრულიად მორგებული შინაარსისთვის.

Როგორ მუშაობს

სანამ Bootstrap-ის მოდალური კომპონენტის გამოყენებას დაიწყებდეთ, აუცილებლად წაიკითხეთ შემდეგი, რადგან ჩვენი მენიუს ვარიანტები ახლახან შეიცვალა.

მოდალები აგებულია HTML, CSS და JavaScript-ით. ისინი განლაგებულია დოკუმენტში ყველა დანარჩენზე და აშორებენ გადახვევას <body>ისე, რომ მოდალური შინაარსი გადახვევის ნაცვლად.
მოდალურ „ფონზე“ დაწკაპუნება ავტომატურად დახურავს მოდალს.
Bootstrap მხარს უჭერს მხოლოდ ერთ მოდალურ ფანჯარას ერთდროულად. ჩადგმული მოდალები არ არის მხარდაჭერილი, რადგან მიგვაჩნია, რომ ისინი მომხმარებლის ცუდი გამოცდილებაა.
მოდალები იყენებენ position: fixed, რომელიც ზოგჯერ შეიძლება იყოს ცოტა სპეციფიკური მისი რენდერის შესახებ. შეძლებისდაგვარად, განათავსეთ თქვენი მოდალური HTML ზედა დონის პოზიციაზე, რათა თავიდან აიცილოთ სხვა ელემენტების პოტენციური ჩარევა. თქვენ სავარაუდოდ შეგექმნებათ პრობლემები .modalსხვა ფიქსირებულ ელემენტში ჩასმისას.
კიდევ ერთხელ, იმის გამო position: fixed, რომ არსებობს გარკვეული უკუჩვენებები მოდალების გამოყენებასთან დაკავშირებით მობილურ მოწყობილობებზე. იხილეთ ჩვენი ბრაუზერის მხარდაჭერის დოკუმენტები დეტალებისთვის.
იმის გამო, თუ როგორ განსაზღვრავს HTML5 მის სემანტიკას, HTML autofocusატრიბუტს არანაირი ეფექტი არ აქვს Bootstrap მოდალში. იგივე ეფექტის მისაღწევად გამოიყენეთ რამდენიმე მორგებული JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

განაგრძეთ კითხვა დემოსა და გამოყენების ინსტრუქციებისთვის.

მაგალითები

ქვემოთ მოყვანილია სტატიკური მოდალური მაგალითი (იგულისხმება მისი positionდა displayგადალახული). მოყვება მოდალური სათაური, მოდალური ტექსტი (აუცილებელია padding) და მოდალური ქვედა კოლონტიტული (სურვილისამებრ). გთხოვთ, შეძლებისდაგვარად შეიყვანოთ მოდალური სათაურები გაუქმების ქმედებებით, ან მიაწოდოთ სხვა აშკარა დახურვის ქმედება.

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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">&times;</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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

ვერტიკალურად ორიენტირებული

დაამატეთ .modal-dialog-centeredმოდალის .modal-dialogვერტიკალურად ცენტრში.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>

ინსტრუმენტები და პოპოვერები

საჭიროების შემთხვევაში, ინსტრუმენტების და პოპოვერების მოთავსება შესაძლებელია მოდალში. როდესაც მოდალები დახურულია, ნებისმიერი ინსტრუმენტების რჩევები და პოპოვერები ასევე ავტომატურად იშლება.

<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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&times;</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)
})

ანიმაციის წაშლა

მოდალებისთვის, რომლებიც უბრალოდ ჩნდება, ვიდრე ქრება სანახავად, ამოიღეთ .fadeკლასი თქვენი მოდალური მარკირებიდან.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

დინამიური სიმაღლეები

თუ მოდალის სიმაღლე იცვლება, სანამ ის ღიაა, თქვენ უნდა დარეკოთ $('#myModal').modal('handleUpdate')მოდალის პოზიციის შესწორებაზე, თუ გადახვევის ზოლი გამოჩნდება.

ხელმისაწვდომობა

დარწმუნდით, რომ დაამატეთ role="dialog"და aria-labelledby="...", მოდალური სათაურის მითითებით .modal, და role="document"თავად .modal-dialog. გარდა ამისა, შეგიძლიათ მიუთითოთ თქვენი მოდალური დიალოგის aria-describedbyშესახებ .modal.

YouTube ვიდეოების ჩაშენება

YouTube ვიდეოების მოდალში ჩასმა მოითხოვს დამატებით JavaScript-ს, რომელიც არ არის Bootstrap-ში, რათა ავტომატურად შეწყვიტოს დაკვრა და სხვა. იხილეთ ეს სასარგებლო Stack Overflow პოსტი დამატებითი ინფორმაციისთვის.

სურვილისამებრ ზომები

მოდალებს აქვთ ორი სურვილისამებრ ზომა, რომლებიც ხელმისაწვდომია მოდიფიკატორის კლასების საშუალებით, რათა განთავსდეს .modal-dialog. ეს ზომები შედის გარკვეულ წყვეტის წერტილებში, რათა თავიდან იქნას აცილებული ჰორიზონტალური გადახვევის ზოლები ვიწრო ხედებზე.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</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`ფონი, რომელიც არ ხურავს მოდალს დაწკაპუნებისას.
კლავიატურა	ლოგიკური	მართალია	ხურავს მოდალს გაქცევის ღილაკის დაჭერისას
ფოკუსირება	ლოგიკური	მართალია	ინიციალიზაციისას ყურადღებას ამახვილებს მოდალზე.
შოუ	ლოგიკური	მართალია	აჩვენებს მოდალს ინიციალიზაციისას.

მეთოდები

ასინქრონული მეთოდები და გადასვლები

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

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

მოდალური

Როგორ მუშაობს

მაგალითები