in English

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.

Në këtë faqe

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. Sa herë që është e mundur, vendosni 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:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})

Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja e medias. Shikoni seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .

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">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Sfondi statik

Kur sfondi është vendosur në statik, modali nuk mbyllet kur klikohet jashtë tij. Klikoni butonin më poshtë për ta provuar.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</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ë.

Ju gjithashtu mund të krijoni një modal të lëvizshëm që lejon lëvizjen e trupit modal duke shtuar .modal-dialog-scrollablenë .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Në qendër vertikale

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

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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>

Keni një mori butonash që të gjithë aktivizojnë të njëjtin modal me përmbajtje paksa të ndryshme? Përdorni event.relatedTargetdhe atributet HTMLdata-bs-* për të ndryshuar përmbajtjen e modalit në varësi të butonit të 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-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Kaloni ndërmjet modaleve

Kaloni ndërmjet modaleve të shumta me një vendosje të zgjuar të atributeve data-bs-targetdhe . data-bs-togglePër shembull, mund të ndryshoni një modal të rivendosjes së fjalëkalimit nga një modal i hyrjes tashmë i hapur. Ju lutemi, vini re se shumë modale nuk mund të hapen në të njëjtën kohë - kjo metodë thjesht kalon midis dy modaleve të veçanta.

Hap modalin e parë

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

Ndrysho animacionin

Variabla $modal-fade-transformpërcakton gjendjen e transformimit të .modal-dialoganimacionit modal fade-in, $modal-show-transformndryshorja përcakton transformimin e .modal-dialognë fund të animacionit modal fade-in.

Nëse dëshironi për shembull një animacion zmadhues, mund të vendosni $modal-fade-transform: scale(.8).

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" 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.handleUpdate()për të rirregulluar pozicionin e modalit në rast se shfaqet një shirit lëvizës.

Aksesueshmëria

Sigurohuni që të shtoni aria-labelledby="...", duke iu referuar titullit modal, në .modal. Për më tepër, ju mund të jepni një përshkrim të dialogut tuaj modal me aria-describedbynë .modal. Vini re se nuk keni nevojë të shtoni role="dialog"pasi ne tashmë e shtojmë atë përmes JavaScript.

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ë tre 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.

Madhësia	Klasa	Gjerësia maksimale modale
I vogël	`.modal-sm`	`300px`
E paracaktuar	Asnje	`500px`
I madh	`.modal-lg`	`800px`
Shumë i madh	`.modal-xl`	`1140px`

Modali ynë i paracaktuar pa klasën e modifikuesit përbën modalin e madhësisë "mesatare".

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Një tjetër ndryshim është opsioni për të shfaqur një modal që mbulon portin e shikimit të përdoruesit, i disponueshëm nëpërmjet klasave të modifikuesve që vendosen në një .modal-dialog.

Klasa	Disponueshmëria
`.modal-fullscreen`	Gjithmonë
`.modal-fullscreen-sm-down`	Më poshtë`576px`
`.modal-fullscreen-md-down`	Më poshtë`768px`
`.modal-fullscreen-lg-down`	Më poshtë`992px`
`.modal-fullscreen-xl-down`	Më poshtë`1200px`
`.modal-fullscreen-xxl-down`	Më poshtë`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Sass

Variablat

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Lak

Modalet e përgjegjshme me ekran të plotë krijohen nëpërmjet $breakpointshartës dhe një cikli në scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

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 anashkalon sjelljen e parazgjedhur të lëvizjes 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

Ndrysho

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

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

Largoje

Largimi mund të arrihet me dataatributin në një buton brenda modalit siç tregohet më poshtë:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

ose në një buton jashtë modalit duke përdorur data-bs-targetsiç tregohet më poshtë:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

Ndërsa mbështeten të dyja mënyrat për të hequr një modal, mbani në mend se heqja e një modali nga jashtë nuk përputhet me modelin e dizajnit të dialogut modal WAI-ARIA . Bëjeni këtë në rrezikun tuaj.

Përmes JavaScript

Krijo një modal me një rresht të vetëm JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), 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-bs-, si në data-bs-backdrop="".

Emri	Lloji	E paracaktuar	Përshkrim
`backdrop`	boolean ose vargun`'static'`	`true`	Përfshin një element të sfondit modal. Përndryshe, specifikoni `static`për një sfond që nuk e mbyll modalin kur klikoni.
`keyboard`	logjike	`true`	Mbyll modalin kur shtypet tasti i arratisjes
`focus`	logjike	`true`	Vë fokusin në modal 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 .

Opsionet e kalimit

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

ndërroj

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.toggle()

shfaqje

Hap me dorë 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.show()

Gjithashtu, ju mund të kaloni një element DOM si një argument që mund të merret në ngjarjet modale (si relatedTargetveti).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

fshehin

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.hide()

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.handleUpdate()

disponoj

Shkatërron modalitetin e një elementi. (Heq të dhënat e ruajtura në elementin DOM)

myModal.dispose()

getInstance

Metoda statike e cila ju lejon të merrni shembullin modal të lidhur me një element DOM

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Metoda statike e cila ju lejon të merrni shembullin modal të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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
`show.bs.modal`	Kjo ngjarje ndizet menjëherë kur `show`thirret metoda e shembullit. Nëse shkaktohet nga një klikim, elementi i klikuar është i disponueshëm si `relatedTarget`veti e ngjarjes.
`shown.bs.modal`	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 `relatedTarget`veti e ngjarjes.
`hide.bs.modal`	Kjo ngjarje aktivizohet menjëherë kur `hide`thirret metoda e shembullit.
`hidden.bs.modal`	Kjo ngjarje aktivizohet kur modali ka përfunduar së fshehuri nga përdoruesi (do të presë që tranzicioni i CSS të përfundojë).
`hidePrevented.bs.modal`	Kjo ngjarje aktivizohet kur shfaqet modali, sfondi i tij është `static`dhe një klikim jashtë modalit ose një shtypje e tastierës ikje kryhet me opsionin e tastierës ose `data-bs-keyboard`vendoset në `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})