Source

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.

Çawa dixebite

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. .modalDema 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 autofocusHTML -ê 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')
})

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Ji bo demo û rêbernameyên karanîna xwendinê bidomînin.

Examples

Li jêr mînakek modal a statîk heye (wateya wê positionû displayhatî 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">&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>

Demo zindî

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

Backdrop statîk

Dema ku pa��perdeya li ser statîk tê danîn, dema ku li derveyî wê bitikîne modal girtî nabe. Bişkojka jêrîn bikirtînin da ku wê biceribînin.

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

Scrolling naveroka dirêj

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

Her weha hûn dikarin modalek gerok biafirînin ku destûrê dide laşê modal bi lêzêdekirina .modal-dialog-scrollableli .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>

Vertically navend

Li navenda modalê ya vertîkal zêde .modal-dialog-centeredbikin ..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">&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>

Tooltips û popovers

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>

Tora bikar tînin

Pergala tora Bootstrap-ê di nav modalekê de bi hêlîna di .container-fluidhundurê 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>

Naveroka modal a cihêreng

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">&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)
})

Anîmasyon biguherînin

$modal-fade-transformGuherbar rewşa veguherînê ya berî .modal-dialoganîmasyona fade-in modal $modal-show-transformdiyar dike, guhêrbar veguherîna ya .modal-dialogli dawiya anîmasyona modal a fade-in diyar dike.

Heke hûn wek nimûne anîmasyonek zoom-in dixwazin, hûn dikarin saz bikin $modal-fade-transform: scale(.8).

Anîmasyonê rakin

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>

Bilindahiya dînamîk

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.

Gihîştina

Bê guman lê zêde bikin role="dialog"û aria-labelledby="...", sernavê modal, bi .modal, û role="document"bi .modal-dialogxwe re referans bikin. Wekî din, hûn dikarin ravekirina diyaloga xweya modal bi aria-describedbyli ser re bidin .modal.

Veguheztina vîdyoyên YouTube

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.

Mezinahiyên Bijarî

Modal sê mezinahiyên vebijarkî hene, 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.

Mezinayî Sinif Modal max-width
Biçûk .modal-sm 300px
Destçûnî Netû 500px
Mezin .modal-lg 800px
Extra mezin .modal-xl 1140px

Modala meya xwerû ya bê çîna guhêrbar modala mezinahiya "navîn" pêk tîne.

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

Bikaranîna

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-opendike <body>û ji bo .modal-backdropku deverek klîk peyda bike ji bo rakirina modalên nîşankirî dema ku li derveyî modalê bitikîne peyda dike.

Bi taybetmendiyên daneyê

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>

Bi JavaScript

myModalBi yek rêzek JavaScript re modalek bi id re bang bikin :

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

Vebijêrk

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 Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click or on escape key press.
keyboard boolean true Closes the modal when escape key is pressed
focus boolean true Puts the focus on the modal when initialized.
show boolean true Shows the modal when initialized.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.modal(options)

Activates your content as a modal. Accepts an optional options object.

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

.modal('toggle')

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

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

.modal('show')

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

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

.modal('hide')

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

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

.modal('handleUpdate')

Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

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

.modal('dispose')

Destroys an element’s modal.

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Type Description
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})