Source

Modal

Përdorni shtojcën modale JavaScript të Bootstrap për të shtuar dialogë në faqen tuaj për kutitë e lehta, njoftimet e përdoruesve ose përmbajtje krejtësisht të personalizuar.

Si punon

Përpara se të filloni me komponentin modal të Bootstrap, sigurohuni që të lexoni sa vijon pasi opsionet tona të menysë kanë ndryshuar kohët e fundit.

  • Modalet ndërtohen me HTML, CSS dhe JavaScript. Ato janë të pozicionuara mbi çdo gjë tjetër në dokument dhe heqin lëvizjen nga kutia në <body>mënyrë që përmbajtja modale të lëvizë në vend.
  • Klikimi në "sfondin" modal do të mbyllë automatikisht modalin.
  • Bootstrap mbështet vetëm një dritare modale në të njëjtën kohë. Modalet e ndërlidhura nuk mbështeten pasi ne besojmë se janë përvoja të dobëta të përdoruesit.
  • Modalet përdorin position: fixed, e cila ndonjëherë mund të jetë paksa e veçantë për paraqitjen e saj. Kurdoherë që është e mundur, vendoseni HTML-në tuaj modale në një pozicion të nivelit të lartë për të shmangur ndërhyrjet e mundshme nga elementë të tjerë. Ka të ngjarë të hasni në probleme kur futni një .modalbrenda një elementi tjetër fiks.
  • Edhe një herë, për shkak të position: fixed, ka disa paralajmërime me përdorimin e modaleve në pajisjet celulare. Shikoni dokumentet e mbështetjes së shfletuesit tonë për detaje.
  • Për shkak të mënyrës se si HTML5 përcakton semantikën e tij, atributi autofocusHTML nuk ka asnjë efekt në modalet e Bootstrap. Për të arritur të njëjtin efekt, përdorni disa JavaScript të personalizuara:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Vazhdoni të lexoni për demonstrimet dhe udhëzimet e përdorimit.

Shembuj

Më poshtë është një shembull modal statikposition (që do të thotë se është dhe displayështë anashkaluar). Të përfshira janë koka modale, trupi modal (kërkohet për padding) dhe fundi modal (opsionale). Ju kërkojmë që të përfshini titujt modalë me veprimet e heqjes dorë kurdo që është e mundur, ose të ofroni një veprim tjetër të qartë të heqjes dorë.

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

Demoja e drejtpërdrejtë

Ndryshoni një demonstrim modal funksional duke klikuar butonin më poshtë. Do të rrëshqasë poshtë dhe do të zbehet nga pjesa e sipërme e faqes.

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

Lëvizja e përmbajtjes së gjatë

Kur modalet bëhen shumë të gjata për pamjen ose pajisjen e përdoruesit, ato lëvizin pavarësisht nga vetë faqja. Provoni demonstrimin më poshtë për të parë se çfarë nënkuptojmë.

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

Në qendër vertikale

Shtoni .modal-dialog-centerednë .modal-dialognë qendër vertikalisht modalin.

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

Këshilla për veglat dhe popovers

Këshillat e veglave dhe popover- et mund të vendosen brenda modaleve sipas nevojës . Kur modalet mbyllen, të gjitha këshillat e veglave dhe shtesat brenda hiqen gjithashtu automatikisht.

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

Duke përdorur rrjetin

Përdorni sistemin e rrjetit Bootstrap brenda një modali duke fole .container-fluidbrenda .modal-body. Pastaj, përdorni klasat normale të sistemit të rrjetit si kudo tjetër.

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

Përmbajtja e ndryshme modale

Keni një mori butonash që të gjithë aktivizojnë të njëjtin modal me përmbajtje paksa të ndryshme? Përdorni event.relatedTargetdhe atributet HTMLdata-* (mundësisht nëpërmjet jQuery ) për të ndryshuar përmbajtjen e modalit në varësi të butonit që është klikuar.

Më poshtë është një demonstrim i drejtpërdrejtë i ndjekur nga shembulli HTML dhe JavaScript. Për më shumë informacion, lexoni dokumentet e ngjarjeve modale për detaje mbi 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)
})

Hiq animacionin

Për modalet që thjesht shfaqen në vend që të zbehen për t'u parë, hiqni .fadeklasën nga shënimi juaj modal.

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

Lartësitë dinamike

Nëse lartësia e modalit ndryshon ndërsa është e hapur, duhet të telefononi $('#myModal').modal('handleUpdate')për të rirregulluar pozicionin e modalit në rast se shfaqet një shirit lëvizës.

Aksesueshmëria

Sigurohuni që të shtoni role="dialog"dhe aria-labelledby="...", duke iu referuar titullit modal, në .modal, dhe role="document"në .modal-dialogvetvete. Për më tepër, ju mund të jepni një përshkrim të dialogut tuaj modal me aria-describedbynë .modal.

Përfshirja e videove në YouTube

Përfshirja e videove në YouTube në modale kërkon JavaScript shtesë jo në Bootstrap për të ndaluar automatikisht riprodhimin dhe më shumë. Shihni këtë postim të dobishëm të Stack Overflow për më shumë informacion.

Madhësitë opsionale

Modalet kanë dy madhësi opsionale, të disponueshme nëpërmjet klasave të modifikuesve për t'u vendosur në një .modal-dialog. Këto madhësi hyjnë në pika të caktuara ndërprerjeje për të shmangur shiritat e lëvizjes horizontale në pamjet më të ngushta.

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

Shtojca modale ndryshon përmbajtjen tuaj të fshehur sipas kërkesës, nëpërmjet atributeve të të dhënave ose JavaScript. Ai gjithashtu shton sjelljen e parazgjedhur .modal-opentë <body>lëvizjes për të anashkaluar dhe gjeneron një .modal-backdroppër të siguruar një zonë klikimi për të hequr modalet e treguara kur klikoni jashtë modalit.

Nëpërmjet atributeve të të dhënave

Aktivizoni një modal pa shkruar JavaScript. Vendoseni data-toggle="modal"në një element kontrollues, si një buton, së bashku me një data-target="#foo"ose href="#foo"për të synuar një modal specifik për ta ndërruar.

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

Përmes JavaScript

Thirrni një modal me id myModalme një rresht të vetëm JavaScript:

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-backdrop="".

Emri Lloji E paracaktuar Përshkrim
sfond boolean ose vargun'static' e vërtetë Përfshin një element të sfondit modal. Përndryshe, specifikoni staticpër një sfond që nuk e mbyll modalin kur klikoni.
tastierë logjike e vërtetë Mbyll modalin kur shtypet tasti i arratisjes
fokusi logjike e vërtetë Vë fokusin në modal kur inicializohet.
shfaqje logjike e vërtetë Tregon modalin kur inicializohet.

Metodat

Metodat dhe tranzicionet asinkrone

Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .

Shikoni dokumentacionin tonë JavaScript për më shumë informacion.

.modal(options)

Aktivizon përmbajtjen tuaj si modale. Pranon një opsion opsional object.

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

.modal('toggle')

Ndryshon manualisht një modal. Kthehet te thirrësi përpara se modali të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.modalose ).hidden.bs.modal

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

.modal('show')

Hap manualisht një modal. Kthehet te thirrësi përpara se modali të jetë shfaqur në të vërtetë (dmth. përpara se të shown.bs.modalndodhë ngjarja).

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

.modal('hide')

Fsheh manualisht një modal. Kthehet te thirrësi përpara se modali të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.modalndodhë ngjarja).

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

.modal('handleUpdate')

Rregulloni manualisht pozicionin e modalit nëse lartësia e modalit ndryshon ndërsa ai është i hapur (dmth. në rast se shfaqet një shirit lëvizës).

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

.modal('dispose')

Shkatërron modalitetin e një elementi.

Ngjarjet

Klasa modale e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin modal. Të gjitha ngjarjet modale janë ndezur në vetë modalin (dmth. në <div class="modal">).

Lloji i ngjarjes Përshkrim
tregojnë.bs.modale Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit. Nëse shkaktohet nga një klikim, elementi i klikuar është i disponueshëm si relatedTargetveti e ngjarjes.
treguar.bs.modale Kjo ngjarje aktivizohet kur modali është bërë i dukshëm për përdoruesin (do të presë që kalimet CSS të përfundojnë). Nëse shkaktohet nga një klikim, elementi i klikuar është i disponueshëm si relatedTargetveti e ngjarjes.
fsheh.bs.modale Kjo ngjarje aktivizohet menjëherë kur hidethirret metoda e shembullit.
e fshehur.bs.modale Kjo ngjarje aktivizohet kur modali ka përfunduar së fshehuri nga përdoruesi (do të presë që tranzicioni i CSS të përfundojë). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})