მოდალური
გამოიყენეთ 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')
})
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
fade-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').modal('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>
გამოყენება
მოდალური დანამატი ცვლის თქვენს ფარულ შინაარსს მოთხოვნისამებრ, მონაცემთა ატრიბუტების ან 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 გადასვლების დასრულებას). |
დამალვა Prevented.bs.modal | ეს ღონისძიება ირთვება, როდესაც ნაჩვენებია მოდალი, მისი ფონი არის static და დაწკაპუნება მოდალის გარეთ ან გაქცევის ღილაკის დაჭერა შესრულდება კლავიატურის ოფციით ან data-keyboard დაყენებულია false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})