Մոդալ
Օգտագործեք 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>
Tooltips և popovers
Անհրաժեշտության դեպքում գործիքների հուշումներն ու փոփովերը կարող են տեղադրվել մոդալների մեջ: Երբ մոդալները փակ են, ցանկացած գործիքի հուշում և ներդիրում ավտոմատ կերպով անջատվում են:
<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
on-ի հետ .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"
կարգավորիչի տարրը, ինչպես կոճակը, a-ի հետ մեկտեղ 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 ֆոն, որը չի փակում մոդալը սեղմելով: |
ստեղնաշար | բուլյան | ճիշտ | Փակում է մոդալը, երբ սեղմված է escape ստեղնը |
կենտրոնանալ | բուլյան | ճիշտ | Նախաստորագրվելիս կենտրոնանում է մոդալի վրա: |
ցուցադրում | բուլյան | ճիշտ | Ցույց է տալիս մոդալը, երբ սկզբնավորվում է: |
Մեթոդներ
Ասինխրոն մեթոդներ և անցումներ
Բոլոր 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.bs.modal | Այս իրադարձությունը գործարկվում է անմիջապես, երբ hide կանչվում է օրինակի մեթոդը: |
թաքնված.բս.մոդալ | Այս իրադարձությունը գործարկվում է, երբ մոդալն ավարտում է օգտագործողից թաքցված լինելը (կսպասի CSS անցումների ավարտին): |
hidePrevented.bs.modal | Այս իրադարձությունը գործարկվում է, երբ մոդալը ցուցադրվում է, դրա հետնապատկերը գտնվում է, static և մոդալից դուրս սեղմում կամ escape ստեղնը սեղմում է ստեղնաշարի ընտրանքով կամ data-keyboard դրվում է false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})