Source

Modal

Koresha Bootstrap ya JavaScript modal plugin kugirango wongere ibiganiro kurubuga rwawe kumasanduku yumucyo, imenyesha ryabakoresha, cyangwa ibikubiyemo rwose.

Uburyo ikora

Mbere yo gutangira hamwe na moderi ya Bootstrap, menya neza gusoma ibikurikira nkuko amahitamo yacu aherutse guhinduka.

  • Moderi yubatswe hamwe na HTML, CSS, na JavaScript. Bashyizwe hejuru y'ibindi byose biri mu nyandiko hanyuma bakureho umuzingo <body>kugirango ibintu bya modal bizunguruka aho.
  • Kanda kuri modal "backdrop" izahita ifunga modal.
  • Bootstrap ishyigikira idirishya rimwe gusa icyarimwe. Moderi yatoranijwe ntabwo ishyigikiwe nkuko twemera ko ari uburambe bwabakoresha.
  • Uburyo bukoreshwa position: fixed, bushobora rimwe na rimwe kuba bwihariye kubijyanye no gutanga. Igihe cyose bishoboka, shyira HTML modal yawe murwego rwo hejuru kugirango wirinde kwivanga mubindi bintu. Birashoboka ko uzahura nibibazo mugihe utera .modalikindi kintu gihamye.
  • Ubundi na none, kubera position: fixed, hari caveats hamwe no gukoresha modal kubikoresho bigendanwa. Reba amashakiro yacu ashyigikira doc kubisobanuro birambuye.
  • Bitewe nuburyo HTML5 isobanura ibisobanuro byayo, ikiranga autofocusHTML nta ngaruka igira muburyo bwa Bootstrap. Kugirango ugere ku ngaruka zimwe, koresha JavaScript imwe yihariye:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Komeza usome kuri demo nubuyobozi bukoreshwa.

Ingero

Hasi nurugero ruhagazeposition neza (bisobanura ibyarwo kandi displaybyararenze). Harimo imitwe yumutwe, modal umubiri (bisabwa kuri padding), hamwe na moderi yumutwe (bidashoboka). Turasaba ko ushiramo imitwe yuburyo hamwe nibikorwa byo kwirukana igihe cyose bishoboka, cyangwa ugatanga ikindi gikorwa cyo kwirukana.

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

Kubaho

Kanda kuri moderi ikora yerekana kanda buto hepfo. Bizanyerera kandi bishire hejuru yurupapuro.

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

Kuzenguruka ibintu birebire

Iyo moderi iba ndende cyane kubakoresha kureba cyangwa igikoresho, bazunguruka batisunze page ubwayo. Gerageza demo hepfo kugirango urebe icyo dushaka kuvuga.

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

Hagati

Ongeraho .modal-dialog-centeredkugirango .modal-dialoguhagarike hagati ya modal.

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

Ibikoresho na popovers

Ibikoresho na popovers birashobora gushirwa muburyo bukenewe. Iyo moderi zifunze, ibikoresho byose hamwe na popovers imbere nabyo birahita birukanwa.

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

Gukoresha gride

Koresha Bootstrap grid sisitemu muburyo bwo guteramo .container-fluidimbere muri .modal-body. Noneho, koresha urwego rusanzwe rwa grid sisitemu nkuko wabishaka ahandi.

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

Guhindura ibintu bitandukanye

Ufite buto ya buto yose itera modal imwe hamwe nibintu bitandukanye? Koresha event.relatedTargetna HTML data-*ibiranga (birashoboka binyuze kuri jQuery ) kugirango uhindure ibiri muri modal ukurikije buto yakanze.

Hasi ni demo nzima ikurikirwa nurugero HTML na JavaScript. Kubindi bisobanuro, soma ibyabaye modal docs kugirango ubone ibisobanuro birambuye 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)
})

Hindura animasiyo

Impinduka $modal-fade-transformigena ihinduka ryimiterere ya .modal-dialogmbere yuburyo bwa fade-in animasiyo, $modal-show-transformimpinduka igena impinduka .modal-dialogkumpera ya modal fade-in animasiyo.

Niba ushaka urugero rwa zoom-in animasiyo, urashobora gushiraho $modal-fade-transform: scale(.8).

Kuraho animasiyo

Kuburyo bugaragara gusa aho gushira kugirango turebe, kura urwego muburyo .fadebwawe.

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

Uburebure butangaje

Niba uburebure bwa modal ihinduka mugihe ifunguye, ugomba guhamagara $('#myModal').modal('handleUpdate')kugirango uhindure imyanya yuburyo mugihe umuzingo ugaragara.

Kuboneka

Wemeze kongeramo role="dialog"kandi aria-labelledby="...", werekeza kumutwe wuburyo, kuri .modal, no role="document"kuri .modal-dialogwenyine. Byongeye kandi, urashobora gutanga ibisobanuro byuburyo bwikiganiro hamwe aria-describedbyna .modal.

Gushyira amashusho ya YouTube

Gushyira amashusho ya YouTube muburyo busaba JavaScript yinyongera itari muri Bootstrap kugirango ihite ihagarika gukina nibindi. Reba iyi nyandiko ifasha Stack Overflow post kubindi bisobanuro.

Ingano

Moderi ifite ubunini butatu butandukanye, buraboneka binyuze mumashuri ahindura kugirango ashyirwe kuri a .modal-dialog. Ingano itera ahantu runaka kugirango wirinde gutambuka gutambitse kumurongo muto.

Ingano Icyiciro Ubugari bwubugari
Ntoya .modal-sm 300px
Mburabuzi Nta na kimwe 500px
Kinini .modal-lg 800px
Kinini cyane .modal-xl 1140px

Mburabuzi modal idafite urwego ruhindura igizwe nubunini bwa "medium".

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

Ikoreshwa

Amacomeka ya modal ahinduranya ibintu byihishe kubisabwa, ukoresheje ibiranga data cyangwa JavaScript. Iyongera kandi .modal-openkuri <body>to override imyitwarire idasanzwe yo kuzunguruka kandi ikabyara a .modal-backdropgutanga agace kanda kugirango wirukane moderi yerekanwe mugihe ukanze hanze yuburyo.

Binyuze mu biranga amakuru

Kora modal utanditse JavaScript. Shyira data-toggle="modal"ku kintu kigenzura, nka buto, hamwe na a data-target="#foo"cyangwa href="#foo"ugamije uburyo bwihariye bwo guhinduranya.

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

Binyuze kuri JavaScript

Hamagara modal ifite id myModalifite umurongo umwe wa JavaScript:

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

Amahitamo

Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-, Nka Muri data-backdrop="".

Izina Andika Mburabuzi Ibisobanuro
Inyuma boolean cyangwa umugozi'static' ni ukuri Harimo modal-backdrop element. Ubundi, vuga statickuri backdrop idafunga modal kanda.
Mwandikisho boolean ni ukuri Gufunga modal mugihe urufunguzo rwo guhunga rukanda
kwibanda boolean ni ukuri Shyira intumbero kuri modal iyo itangijwe.
kwerekana boolean ni ukuri Erekana modal mugihe yatangijwe.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

.modal(options)

Koresha ibikubiyemo nkibisanzwe. Emera amahitamo object.

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

.modal('toggle')

Intoki ihinduranya modal. Garuka kumuhamagara mbere yuburyo bwerekanwe cyangwa bwihishe (ni ukuvuga mbere yuko ibyabaye shown.bs.modalcyangwa hidden.bs.modalibyabaye bibaho).

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

.modal('show')

Nintoki ifungura modal. Garuka kumuhamagara mbere yuburyo bwerekanwe (ni ukuvuga mbere yuko shown.bs.modalibyabaye biba).

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

.modal('hide')

Nintoki ihishe modal. Garuka kumuhamagara mbere yuburyo bwihishe (nukuvuga mbere yuko hidden.bs.modalibyabaye bibaho).

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

.modal('handleUpdate')

Nintoki uhindure imyanya yuburyo niba uburebure bwa modal ihinduka mugihe ifunguye (nukuvuga mugihe umuzingo ugaragara).

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

.modal('dispose')

Gusenya ikintu cyuburyo.

Ibyabaye

Icyiciro cya Bootstrap cyerekana ibyabaye bike kugirango bifatanye mubikorwa. Ibintu byose byabaye birasa kuri modal ubwayo (ni ukuvuga kuri <div class="modal">).

Ubwoko bwibyabaye Ibisobanuro
kwerekana.bs.modal Ibirori birasa ako kanya mugihe showurugero rwitwa. Niba byatewe no gukanda, ibintu byakanze birahari relatedTargetnkumutungo wibyabaye.
yerekanwe.bs.modal Ibirori birukanwa mugihe modal yakozwe igaragara kubakoresha (izategereza ko inzibacyuho ya CSS irangira). Niba byatewe no gukanda, ibintu byakanze birahari relatedTargetnkumutungo wibyabaye.
guhisha.bs.modal Ibi birori birahita bisohoka mugihe uburyo hidebwurugero bwahamagawe.
bihishe.bs.modal Ibirori birukanwa mugihe modal yarangije guhishwa kubakoresha (izategereza ko inzibacyuho ya CSS irangira). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})