Modal
Pêveka modal a JavaScript-ê ya Bootstrap bikar bînin da ku ji bo sivik, agahdariya bikarhêner, an naveroka tevahî xwerû diyalogan li malpera xwe zêde bikin.
Berî ku hûn dest bi pêkhateya modal a Bootstrap-ê bikin, pê ewle bin ku hûn jêrîn bixwînin ji ber ku vebijarkên menuya me di van demên dawî de hatine guhertin.
- Modal bi HTML, CSS, û JavaScriptê têne çêkirin. Ew li ser her tiştê din di belgeyê de cih digirin û ji pelgeyê derdixin
<body>
da ku naveroka modal li şûna wê bizivire. - Bi tikandina li ser modal "backdrop" dê modal bixweber bigire.
- Bootstrap tenê yek carî pencereyek modal piştgirî dike. Modalên nested nayên piştgirî kirin ji ber ku em bawer dikin ku ew ezmûnên bikarhêner ên xizan in.
- Modal bikar tînin
position: fixed
, ku carinan dikare di derbarê vegotina wê de hinekî taybetî be. Kengê ku gengaz be, HTML-a xweya modal li cîhek asta jorîn bi cîh bikin da ku ji destwerdana potansiyel a hêmanên din dûr bikevin..modal
Dema ku hûn di nav hêmanek din a sabît de nehêlin hûn ê di nav pirsgirêkan de derkevin . - Careke din, ji ber
position: fixed
, di karanîna modalên li ser cîhazên mobîl de hin hişyarî hene. Ji bo hûragahiyan li belgeyên piştevaniya geroka me binêrin. - Ji ber ku HTML5 çawa semantîka xwe diyar dike, taybetmendiya
autofocus
HTML -ê di modalên Bootstrap de bandorek nake. Ji bo bidestxistina heman bandorê, hin JavaScript-a xwerû bikar bînin:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
Ji bo demo û rêbernameyên karanîna xwendinê bidomînin.
Li jêr mînakek modal a statîk heye (wateya wê position
û display
hatî rakirin). Di nav de sernivîsa modal, laşê modal (ji bo pêdivî ye padding
), û pêlava modal (vebijarkî) hene. Em daxwaz dikin ku hûn sernavên modal bi çalakiyên betalkirinê re her ku dibe bila bibin, an jî çalakiyek din a betalkirina eşkere peyda bikin.
<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">×</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>
Bi tikandina bişkoja li jêr, demoyek modal a xebitandinê bişkînin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.
<!-- 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">×</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>
Dema ku modal ji bo dîmendera bikarhêner an cîhaza bikarhêner pir dirêj dibin, ew ji rûpelê bixwe dimeşin. Demoya jêrîn biceribînin ku em bibînin ka mebesta me çi ye.
<!-- 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">×</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>
Li navenda modalê ya vertîkal zêde .modal-dialog-centered
bikin ..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="exampleModalCenterTitle">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>
Li gorî hewcedariyên pêlav û popover dikarin di nav modalan de werin danîn. Dema ku modal têne girtin, her serişteyên amûr û popoverên hundur jî bixweber têne derxistin.
<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>
Pergala tora Bootstrap-ê di nav modalekê de bi hêlîna di .container-fluid
hundurê de bikar bînin .modal-body
. Dûv re, dersên pergala torê ya normal wekî ku hûn li cîhek din bikar bînin bikar bînin.
<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>
Xwedî komek bişkok hene ku hemî heman modalê bi naverokên hinekî cûda vedigirin? Taybetmendiyênevent.relatedTarget
HTML û HTML-êdata-*
bikar bînin (dibe ku bi riya jQuery ) ve girêdayî naveroka modalê li gorî kîjan bişkojkê hatî klîk kirin biguhezînin.
Li jêr demoyek zindî ye ku li dû mînaka HTML û JavaScriptê ye. Ji bo bêtir agahdarî, ji bo hûrguliyên li ser belgeyên bûyerên modal bixwîninrelatedTarget
.
<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">×</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)
})
Ji bo modalên ku bi hêsanî xuya dikin ne ku di nav dîtinê de biqewimin, polê ji nîşankirina modaliya xwe derxînin .fade
.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
...
</div>
Ger bilindahiya modalekê di dema vekirî de biguhere, divê hûn bang bikin $('#myModal').modal('handleUpdate')
ku pozîsyona modalê ji nû ve rast bikin heke barek gerok xuya bibe.
Bê guman lê zêde bikin role="dialog"
û aria-labelledby="..."
, sernavê modal, bi .modal
, û role="document"
bi .modal-dialog
xwe re referans bikin. Wekî din, hûn dikarin ravekirina diyaloga xweya modal bi aria-describedby
li ser re bidin .modal
.
Veguheztina vîdyoyên YouTube-ê di modalan de JavaScriptek din hewce dike ku ne di Bootstrap-ê de ye da ku bixweber lîstin û bêtir rawestîne. Ji bo bêtir agahdarî vê posta alîkar a Stack Overflow bibînin.
Modal xwedan du mezinahiyên vebijarkî ne, ku bi navgîniya dersên guhêrbar ve têne peyda kirin ku li ser a .modal-dialog
. Van mezinahî di hin xalên veqetandinê de dikevin da ku li ser dîmenderên teng ji hêlînên horizontî dûr bikevin.
<!-- 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>
Pêveka modal li gorî daxwazê, bi navgîniya taybetmendiyên daneyê an JavaScript-ê naveroka weya veşartî diguhezîne. Di heman demê de ew li ser guheztina tevgerê gerokê ya xwerû zêde .modal-open
dike <body>
û ji bo .modal-backdrop
ku deverek klîk peyda bike ji bo rakirina modalên nîşankirî dema ku li derveyî modalê bitikîne peyda dike.
Bêyî nivîsandina JavaScriptê modalek çalak bikin. Li data-toggle="modal"
ser hêmanek kontrolker, mîna bişkokek, bi hev re data-target="#foo"
an jî href="#foo"
ji bo veguheztina modalek taybetî were danîn.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
myModal
Bi yek rêzek JavaScript re modalek bi id re bang bikin :
$('#myModal').modal(options)
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-
, wekî di data-backdrop=""
.
Nav | Awa | Destçûnî | Terîf |
---|---|---|---|
paşperdeya | boolean an string'static' |
rast | Hêmanek modal-backdrop tê de ye. Wekî din, static ji bo paşnavek ku modalê li ser klîk negire diyar bikin. |
kilawye | boolean | rast | Dema ku bişkojka revê tê pêlkirin modalê digire |
focus | boolean | rast | Dema ku dest pê dike bala xwe dide modalê. |
rêdan | boolean | rast | Dema ku tê destpêkirin modalê nîşan dide. |
Rêbaz û veguherînên Asynchronous
Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.
Naveroka we wekî modal çalak dike. Vebijarkek vebijarkî qebûl object
dike.
$('#myModal').modal({
keyboard: false
})
Modalek bi destan diguhezîne. Berî ku modal bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.modal
an hidden.bs.modal
bûyer çêbibe) vedigere bangewazî.
$('#myModal').modal('toggle')
Bi destan modalek vedike. Berî ku modal bi rastî were xuyang kirin (ango berî ku shown.bs.modal
bûyer çêbibe) vedigere bangewazî.
$('#myModal').modal('show')
Bi destan modalek vedişêre. Berî ku modal bi rastî veşêre (ango berî ku hidden.bs.modal
bûyer çêbibe) vedigere bangewazî.
$('#myModal').modal('hide')
Ger bilindahiya modalekê dema vekirî ye biguhere, bi destan pozîsyona modalê ji nû ve sererast bike (ango heke barek gerok xuya bibe).
$('#myModal').modal('handleUpdate')
Modala hêmanekê hilweşîne.
Dersa modal a Bootstrap çend bûyeran ji bo girêdana fonksiyonên modal eşkere dike. Hemî bûyerên modal li modal bixwe (ango li <div class="modal">
).
Cureyê bûyerê | Terîf |
---|---|
nîşan bide.bs.modal | show Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite. Ger ji ber klîkekê be, hêmana klîkkirî wekî relatedTarget taybetmendiya bûyerê peyda dibe. |
nîşan dan.bs.modal | Dema ku modal ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne). Ger ji ber klîkekê be, hêmana klîkkirî wekî relatedTarget taybetmendiya bûyerê peyda dibe. |
veşêre.bs.modal | hide Dema ku rêbaza nimûneyê hate gazîkirin , ev bûyer tavilê tê şewitandin . |
veşartî.bs.modal | Dema ku modal ji bikarhênerê veşartî qediya ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztinên CSS bimîne). |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})