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.

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:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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="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" 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="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>

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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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>

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

What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.

Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.

Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.

You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?

Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.

We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.

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.

What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.

We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.

Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.

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

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

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').modal('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>

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 `static`pë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 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').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
shfaq.bs.modale	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.
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 `relatedTarget`veti e ngjarjes.
fsheh.bs.modale	Kjo ngjarje aktivizohet menjëherë kur `hide`thirret metoda e shembullit.
i 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ë).
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-keyboard`vendoset në `false`.

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