Modal
Baara kɛ ni Bootstrap ka JavaScript modal plugin ye walasa ka kumasenw fara i ka yɔrɔ kan walasa ka yeelenbɔlanw sɔrɔ, ka baarakɛlaw ka kunnafoniw sɔrɔ, walima ka kunnafoniw sɔrɔ minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye pewu.
Sani i ka Bootstrap ka modal component daminɛ, i k’a lajɛ ka ninnu kalan bawo an ka menu suganditaw Changé kɔsa in na.
- Modaliw bɛ jɔ ni HTML, CSS ani JavaScript ye. U bɛ jɔ sɛbɛn kɔnɔ fɛn tɔw bɛɛ kan ani ka sɛrɛkili Bɔ a
<body>
la walasa modal kɔnɔkow ka sɛrɛkiliw Kɛ o nɔ na. - Ni i ye modal “backdrop” digi, o bɛna modal datugu a yɛrɛma.
- Bootstrap bɛ modal window kelen dɔrɔn de dɛmɛ a waati kelen na. Nested modals tɛ dɛmɛn bawo an dalen b’a la k’u ye baarakɛcogo juguw ye.
- Modals use
position: fixed
, min bɛ Se ka Kɛ kɛrɛnkɛrɛnnenya la dɔɔnin a ka baarakɛcogo la tuma dɔw la. Ni aw bɛ se tuma o tuma, aw bɛ aw ka HTML modali bila sanfɛyɔrɔ la walasa ka aw yɛrɛ tanga fɛn wɛrɛw ka fɛn wɛrɛw ma minnu bɛ se ka kɛ. A ka c’a la, i bɛ boli ka gɛlɛyaw sɔrɔ ni i bɛ nesting a.modal
kɔnɔ fɛn jɔlen wɛrɛ kɔnɔ. - Nin sen in fana na, k’a sababu kɛ
position: fixed
, lasɔmini dɔw bɛ yen ni baara kɛli ye ni modaliw ye telefɔni selilɛriw kan. Aw ye an ka navigatɛri dɛmɛ sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ. - K’a sababu Kɛ HTML5 b’a kɔrɔfɔcogo ɲɛfɔ cogo min na, HTML
autofocus
fɛnɲɛnɛma tɛ nɔ Blà Bootstrap modaliw la. Walasa ka o nɔ kelen sɔrɔ, baara kɛ ni JavaScript dɔw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
Aw bɛ to ka kalan kɛ walasa ka demow ni baarakɛcogo ɲɛfɔlenw sɔrɔ.
Dugukolo kan, misali modal statikiposition
(o kɔrɔ ye a ni display
a ye overridden) ye. O la, modal kunkolo, modali farikolo (a wajibiyalen don padding
), ani modal footer (a bɛ se ka kɛ a yɛrɛ sago ye). An b’a ɲini aw fɛ aw ka modal headers don ni bɔli walew ye ni a bɛ se ka kɛ tuma o tuma, walima ka bɔli wale jɛlen wɛrɛ di.
<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>
Toggle a working modal demo ni i ye butɔni digi min bɛ duguma. A bɛna sɛgɛn ka jigin ka tunun ka bɔ ɲɛ sanfɛ.
<!-- 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>
Ni modɛliw janyalen don kojugu baarakɛla ka filɛli-yɔrɔ walima minɛn na, u bɛ 'sèn Bɔ u yɛrɛ ma ɲɛ yɛrɛ la. Aw ye demo min bɛ duguma, o lajɛ walasa k’a dɔn an b’a fɛ ka min fɔ.
<!-- 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>
A fara a .modal-dialog-centered
kan ka .modal-dialog
modal cɛmancɛ la vertically.
<!-- 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>
Baarakɛminɛnw ni popoverw bɛ se ka bila modaliw kɔnɔ i n’a fɔ a mago bɛ cogo min na. Ni modɛliw datugulen don, baarakɛminɛnw ni popover minnu bɛ kɔnɔ, olu fana bɛ bɔ u yɛrɛ la.
<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>
Baara kɛ ni Bootstrap grid system ye modal kɔnɔ ni nesting .container-fluid
ye .modal-body
. O kɔfɛ, baara kɛ ni normal grid system classes ye i n’a fɔ aw bɛ baara kɛ cogo min na yɔrɔ wɛrɛw la.
<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>
Yala butɔni kulu dɔ bɛ aw bolo minnu bɛɛ bɛ modɛli kelen daminɛ ni kɔnɔkow tɛ kelen ye dɔɔnin wa? Baara kɛ event.relatedTarget
ni HTML data-*
fɛnw ye (a bɛ se ka kɛ jQuery fɛ ) walasa ka modal kɔnɔkow caman ɲɔgɔn falen ka kɛɲɛ ni butɔni min digilen don.
Jigin na, ɲɛjirali ɲɛnama dɔ bɛ yen min bɛ tugu misali HTML ni JavaScript kɔ. Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye modal events docs kalan walasa ka kunnafoni wɛrɛw sɔrɔ 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">×</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)
})
Ni modaliw bɛ bɔ dɔrɔn sanni u ka fade in ka lajɛ, i ka .fade
kalasi bɔ i ka modali taamasiyɛn na.
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
...
</div>
Ni modɛli dɔ janya bɛ Changé k’a sɔrɔ a dabɔlen don, i ka kan ka weleli $('#myModal').modal('handleUpdate')
kɛ walasa ka modal jɔyɔrɔ ladilan kokura ni scrollbar dɔ bɔra.
Aw ye aw jija ka fara role="dialog"
ani aria-labelledby="..."
, ka modal tɔgɔ jira, ka .modal
, ani role="document"
ka fara a .modal-dialog
yɛrɛ kan. Ka fara o kan, aw bɛ se ka ɲɛfɔli kɛ aw ka modal dialogue kan ni aria-describedby
on ye .modal
.
YouTube wideyow donli modaliw kɔnɔ, o bɛ JavaScript wɛrɛw de wajibiya minnu tɛ Bootstrap kɔnɔ walasa ka fɔli jɔ a yɛrɛma ani fɛn wɛrɛw. Aw ye nin dɛmɛnan Stack Overflow post lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
Modalw bɛ ni hakɛ fila ye minnu bɛ se ka sugandi, minnu bɛ sɔrɔ modifier classes fɛ ka bila a kan .modal-dialog
. O hakɛw bɛ Dòn kariyɔrɔ dɔw la walasa ka i yɛrɛ tanga 'sènfɛ-sɛbɛnniw ma minnu bɛ 'yɔrɔ fitininw kan.
<!-- 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>
Modal plugin bɛ i ka kunnafoni dogolenw sɛgɛsɛgɛ ni ɲinini kɛra, data attributes walima JavaScript fɛ. A fana bɛ dɔ Fàra o kan .modal-open
ka ' <body>
sèn Bɔ 'sènfɛ-sɛbɛnni kɛcogo kɔrɔ la ani ka a Lawuli .modal-backdrop
walasa ka 'kùnkolo-yɔrɔ Di walasa ka modal jiralenw Bɔ ni 'klikli Kɛ modal kɔkan.
Modal dɔ baara k’a sɔrɔ i ma JavaScript sɛbɛn. Set data-toggle="modal"
on controleur element, i n’a fɔ butɔni, ka fara a kan data-target="#foo"
walima href="#foo"
ka target modal kɛrɛnkɛrɛnnen dɔ toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Modal dɔ wele ni id myModal
ye ni JavaScript sɛrɛ kelen ye:
$('#myModal').modal(options)
Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-
, i n’a fɔ a bɛ cogo min na data-backdrop=""
.
Tɔ̀gɔ | Ka sɛbɛen masin na | Fɔlɔ | Cogojirali |
---|---|---|---|
kɔkannakow | boolean walima jiribolo'static' |
sɛbɛ | Modal-backdrop element dɔ bɛ a kɔnɔ. O cogo kelen na, a jira static ka ɲɛsin kɔkannafɛn dɔ ma min tɛ modal da tugu click kan. |
klaviyeti ye | boolean ye | sɛbɛ | A bɛ modal da tugu ni escape key digilen don |
ɲɛsin | boolean ye | sɛbɛ | A bɛ sinsin kɛ modal kan ni a daminɛna. |
k'a jira | boolean ye | sɛbɛ | A bɛ modɛli jira ni a daminɛna. |
Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli
API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .
Aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
A bɛ i ka kɔnɔkow baara i n’a fɔ modal. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object
.
$('#myModal').modal({
keyboard: false
})
A bɛ modal dɔ wuli ni bolo ye. A bɛ Segin welebaga ma sani modal ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni shown.bs.modal
walima hidden.bs.modal
ko kɛlen ka Kɛ).
$('#myModal').modal('toggle')
A bɛ modal dɔ da wuli ni bolo ye. A bɛ Segin welebaga ma sani modal ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko shown.bs.modal
in ka Kɛ).
$('#myModal').modal('show')
A bɛ modal dɔ dogo ni bolo ye. A bɛ Segin welebaga ma sani modɛli ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko hidden.bs.modal
in ka Kɛ).
$('#myModal').modal('hide')
Modali jɔyɔrɔ ladilan ni bolo ye ni modali dɔ janya bɛ Changé ka a da wuli (o kɔrɔ ye ko ni sɛrɛkili dɔ bɔra).
$('#myModal').modal('handleUpdate')
A bɛ element dɔ ka modal tiɲɛ.
Bootstrap ka modal class bɛ ko damadɔw jira kɛnɛ kan walasa ka hooking kɛ modal baarakɛcogo la. Modal ko kɛlenw bɛɛ bɛ tasuma don modal yɛrɛ la (o kɔrɔ ye ko <div class="modal">
).
Ko kɛlen suguya | Cogojirali |
---|---|
jira.bs.modal | O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni show misali fɛɛrɛ Weelera. Ni a sababu Bɔra klikɛli la, fɛn min digilen dòn, o bɛ Sɔrɔ i n’a fɔ relatedTarget ko kɛlen in nafa. |
jiralen.bs.modal | O ko in bɛ Fɔ ni modal Kɛra ka Ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ ka Ban). Ni a sababu Bɔra klikɛli la, fɛn min digilen dòn, o bɛ Sɔrɔ i n’a fɔ relatedTarget ko kɛlen in nafa. |
dogo.bs.modal ye | O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni hide misali fɛɛrɛ Weelera. |
dogolen.bs.modal | O ko in bɛ Fɔ ni modal ye dogolen Ban baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban). |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})