Source

Modal

Jiri ngwa mgbakwunye JavaScript nke Bootstrap ka ịgbakwunye mkparịta ụka na saịtị gị maka igbe ọkụ, ọkwa onye ọrụ, ma ọ bụ ọdịnaya omenala kpamkpam.

Ka o si arụ ọrụ

Tupu ịmalite na akụrụngwa modal Bootstrap, jide n'aka na ị gụọ ihe ndị a ka nhọrọ nhọrọ anyị agbanweela n'oge na-adịbeghị anya.

Ejiri HTML, CSS, na JavaScript wuo usoro. A na-edowe ha n'ọkwa karịa ihe ọ bụla ọzọ dị na akwụkwọ ahụ wee wepụ akwụkwọ mpịakọta na <body>ya ka ọdịnaya modal wee pịgharịa kama.
Ịpị na modal "backdrop" ga-emechi modal ozugbo.
Bootstrap na-akwado naanị otu windo modal n'otu oge. Anaghị akwado ụdị akwụghị ụgwọ dịka anyị kwenyere na ha abụghị ahụmihe onye ọrụ adịghị mma.
Modals na-eji position: fixed, nke nwere ike mgbe ụfọdụ bụrụ ntakịrị ihe gbasara nsụgharị ya. Mgbe ọ bụla enwere ike, tinye HTML modal gị n'ọkwa dị elu ka ịzenarị ndabichi sitere na ihe ndị ọzọ. O yikarịrị ka ị ga-enwe nsogbu mgbe ị na-etinye ọnụ .modaln'ime ihe ọzọ edoziri.
Ọzọkwa, n'ihi position: fixed, e nwere ụfọdụ caveats na iji modals na mobile ngwaọrụ. Hụ docs nkwado ihe nchọgharị anyị maka nkọwa.
N'ihi ka HTML5 si akọwa semantics ya, àgwà autofocusHTML enweghị mmetụta na Bootstrap modals. Iji nweta otu mmetụta ahụ, jiri ụfọdụ Javascript omenala:

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

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Nọgide na-agụ maka ngosi ngosi na ntuziaka ojiji.

Ihe atụ

N'okpuru ebe a bụ ihe atụ modal staticposition (pụtara ya na displaya gafeworo ya). Agụnyere bụ modal nkụnye eji isi mee, modal body (chọrọ maka padding), na modal footer (nhọrọ). Anyị na-arịọ gị ka ịtinye ndị nkụnye eji isi mee ihe na omume ịchụpụ mgbe ọ bụla enwere ike, ma ọ bụ wepụta mmemme ịchụpụ ọzọ doro anya.

<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-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ihe ngosi dị ndụ

Gbanwee ngosi ngosi na-arụ ọrụ site na ịpị bọtịnụ dị n'okpuru. Ọ ga-adaba ma daa site n'elu ibe ahụ.

<!-- 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>

Ebe static

Mgbe atọrọ backdrop ka ọ kwụ ọtọ, modal agaghị emechi mgbe ịpị na mpụga ya. Pịa bọtịnụ dị n'okpuru ka ịnwale ya.

<!-- 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" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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">&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">Understood</button>
      </div>
    </div>
  </div>
</div>

Na-atụgharị ọdịnaya ogologo

Mgbe modals toro ogologo maka nlele ma ọ bụ ngwaọrụ onye ọrụ, ha na-atụgharị na ibe ahụ n'onwe ya. Gbalịa ngosi n'okpuru ka ịhụ ihe anyị na-ekwu.

<!-- 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>

Ị nwekwara ike ịmepụta modal mpịakọta nke na-enye ohere ịpịgharịa modal ahụ site na ịgbakwunye .modal-dialog-scrollablena .modal-dialog.

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

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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>

gbadoro ụkwụ na kwụ ọtọ

Tinye .modal-dialog-centeredna .modal-dialogn'etiti modal kwụ ọtọ.

<!-- 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">&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>

Ntuziaka ngwaọrụ na popovers

Enwere ike itinye ndụmọdụ na popovers n'ime modal dị ka achọrọ. Mgbe emechiri modal, ndụmọdụ ngwaọrụ ọ bụla na popovers dị n'ime na-ewepụkwa ozugbo.

<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>

Iji grid

Jiri usoro grid Bootstrap n'ime modal site na itinye akwụ .container-fluidn'ime .modal-body. Mgbe ahụ, jiri klaasị sistemụ grid nkịtị ka ị ga-eme ebe ọ bụla ọzọ.

<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>

Nwere ụyọkọ bọtịnụ niile na-ebute otu modal nwere ọdịnaya dịtụ iche? Jiri event.relatedTargetna njirimara HTMLdata-* (ikekwe site na jQuery ) iji gbanwee ọdịnaya nke modal dabere na bọtịnụ a pịrị.

N'okpuru ebe a bụ ngosi dị ndụ nke HTML na Javascript na-esote. Maka ozi ndị ọzọ, gụọ ihe omume modal docs maka nkọwa na 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)
})

Gbanwee animation

Ndị na $modal-fade-transform-agbanwe agbanwe na-ekpebi ọnọdụ mgbanwe nke .modal-dialogtupu modal fade-na animation, $modal-show-transformmgbanwe na-ekpebi mgbanwe nke .modal-dialogna njedebe nke modal fade-na animation.

Ọ bụrụ na ịchọrọ ọmụmaatụ ihe ngosi mbugharị, ị nwere ike ịtọ $modal-fade-transform: scale(.8).

Wepu ihe nkiri

Maka ụdịdị ndị na-apụta karịa ka ị ga-adaba ka ilele, wepụ .fadeklaasị na akara modal gị.

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

Ogologo dị ike

Ọ bụrụ na ịdị elu nke modal na-agbanwe mgbe ọ na-emeghe, ị ga-akpọ $('#myModal').modal('handleUpdate')maka ịhazigharị ọnọdụ modal ahụ ma ọ bụrụ na akwụkwọ mpịakọta pụtara.

Nnweta

Jide n'aka na ịtinye role="dialog"na aria-labelledby="...", na-ezo aka na aha modal, gaa na .modal, na role="document"n'onwe .modal-dialogya. Na mgbakwunye, ịnwere ike ịnye nkọwa nke mkparịta ụka modal gị na aria-describedbyna .modal.

Na-etinye vidiyo YouTube

Ịtinye vidiyo YouTube na ụdịdị chọrọ Javascript agbakwunyere ọ bụghị na Bootstrap ka ọ kwụsị ịkpọghachi na-akpaghị aka na ihe ndị ọzọ. Hụ akwụkwọ ozi Stack Overflow a na-enyere aka maka ozi ndị ọzọ.

Nha nhọrọ

Modal nwere nha nhọrọ atọ, dị site na klaasị modifier ka etinye ya na .modal-dialog. Nha ndị a na-abanye n'ebe nkwụsịtụ ụfọdụ ka ịzenarị akwụkwọ mpịakọta kwụ ọtọ n'ọdụ ụgbọ mmiri dị warara.

Nha	Klas	Modal max-obosara
Obere	`.modal-sm`	`300px`
Ọdabara	Ọ dịghị	`500px`
Nnukwu	`.modal-lg`	`800px`
Nnukwu ibu	`.modal-xl`	`1140px`

Modal ndabara anyị na-enweghị klas modifier bụ modal nha “ọkara”.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

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

<!-- 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" role="document">
    <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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Ojiji

Ngwa mgbakwunye modal na-agbanwe ọdịnaya gị zoro ezo na ọchịchọ, site na njirimara data ma ọ bụ Javascript. Ọ na-agbakwụnye .modal-openna <body>ịkagbu omume mpịakọta ndabara ma na-ebute a .modal-backdropiji nye mpaghara ọpịpị maka ịchụpụ modals egosiri mgbe ịpị na mpụga modal.

Site na njirimara data

Mee modal rụọ ọrụ na-edeghị Javascript. Tọọ data-toggle="modal"na ihe njikwa, dị ka bọtịnụ, yana otu data-target="#foo"ma ọ bụ href="#foo"iji lekwasịrị anya otu modal ka ị gbanwee.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Site JavaScript

Kpọọ modal nwere id myModalnwere otu ahịrị Javascript:

$('#myModal').modal(options)

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-backdrop="".

Aha	Ụdị	Ọdabara	Nkọwa
ndabere	boolean ma ọ bụ eriri`'static'`	eziokwu	Na-agụnye ihe modal-backdrop element. N'aka nke ọzọ, ezipụta `static`maka backdrop nke na-adịghị emechi modal na ịpị ma ọ bụ na pịa igodo mgbapụ.
ahụigodo	boolean	eziokwu	Na-emechi modal mgbe ịpịrị igodo mgbapụ
lekwasị anya	boolean	eziokwu	Na-etinye uche na modal mgbe ebido ya.
gosi	boolean	eziokwu	Na-egosi modal mgbe ebido ya.

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

`.modal(options)`

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka modal. Nabata nhọrọ nhọrọ object.

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

Iji aka na-atụgharị modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal ma ọ bụ zoo (ya bụ tupu ihe omume shown.bs.modalma ọ bụ hidden.bs.modalihe emee).

$('#myModal').modal('toggle')

`.modal('show')`

Iji aka na-emepe modal. Na-alaghachikwute onye na-akpọ oku tupu egosiri modal n'ezie (ya bụ tupu shown.bs.modalmmemme emee).

$('#myModal').modal('show')

`.modal('hide')`

Iji aka na-ezobe modal. Na-alaghachikwute onye na-akpọ oku tupu ezobe modal ahụ (ya bụ tupu hidden.bs.modalmmemme emee).

$('#myModal').modal('hide')

`.modal('handleUpdate')`

Jiri aka dozie ọnọdụ modal ma ọ bụrụ na ịdị elu nke modal na-agbanwe mgbe ọ na-emeghe (ya bụ ma ọ bụrụ na akwụkwọ mpịakọta pụtara).

$('#myModal').modal('handleUpdate')

`.modal('dispose')`

Na-emebi ụkpụrụ mmewere.

Ihe omume

Klas modal Bootstrap na-ekpughe ihe omume ole na ole maka ịbanye n'ime ọrụ modal. A na-achụpụ ihe omume modal na modal n'onwe ya (ya bụ na <div class="modal">).

Ụdị mmemme	Nkọwa
gosi.bs.modal	Ihe omume a na-agba ọkụ ozugbo `show`a na-akpọ usoro ihe atụ. Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka `relatedTarget`ihe nke mmemme ahụ.
egosiri.bs.modal	A na-achụpụ ihe omume a mgbe onye ọrụ mere ka modal ahụ anya (ga-echere mgbanwe CSS ka ọ gwụchaa). Ọ bụrụ na ọpịpị kpatara ya, ihe pịrị apị dị ka `relatedTarget`ihe nke mmemme ahụ.
zoo.bs.modal	A na-agbapụ ihe omume a ozugbo `hide`a kpọrọ usoro ihe atụ.
zoro ezo.bs.modal	A na-achụpụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ modal (ga-echere mgbanwe CSS ka agwụchaa).
zooPrevented.bs.modal	A na-agbapụ ihe omume a mgbe egosiri modal ahụ, ndabere ya bụ `static`na pịa n'èzí modal ma ọ bụ pịa igodo mgbapụ.

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