TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 Modal?

6

Bootstrap 5 Modal on pohjimmiltaan ponnahdusikkuna, joka näkyy napsauttamalla elementtiä, kuten painiketta tai tekstilinkkiä. Se käyttää JavaScriptiä näyttääkseen napsautuksen sisällön lightbox -tehosteella. Modaalinen ponnahdusikkuna voidaan sulkea joko napsauttamalla sulkemispainiketta tai napsauttamalla modaalisen ikkunan ulkopuolella. Modaaliin viitataan myös monilla muilla nimillä, kuten ponnahdusikkuna, valintaikkuna tai hälytys. Huomaa, että tämä ponnahdusikkuna on erilainen kuin alkuperäinen Bootstrap -hälytyskomponentti.

Tässä opetusohjelmassa luomme joitain modaalisia ponnahdusikkunoita ymmärtääksesi komponentin yksityiskohdat.

Bootstrap 5 Modal -opetusohjelma

Tämä opetusohjelma kattaa seuraavat aiheet:

  1. Modaali käynnistyy painikkeen napsautuksella
  2. Sisällön vieritys modaalin sisällä
  3. Modaalien mitoitus
  4. Modaalinen työkaluvihjeellä ja popoverilla
  5. Ruudukkoasettelun käyttäminen modaalisen sisällön sisällä
  6. Modaalikomponentin mukauttaminen

1 Yksinkertaisen modaalisen laukaisun luominen painikkeen napsautuksella

Saapasraksi modaalinen sisältää kaksi komponenttia – nappia ja modaalinen ikkuna. Alla on modaalin painikekoodi:

<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button>

Kuten näette, se ei ole muuta kuin painikekomponentti, jossa on lisämääritteitä:

  • Määritettä data-toggle = "modal" käytetään tunnistamaan painike modaalikomponenttina.
  • Seuraavaksi on data-target = "#Modal1″, jonka tunnuksen tulee olla yksilöllinen. Tätä samaa tunnusta on käytettävä modaalikomponentissa.

Alla on modaalisen ponnahdusikkunan koodi, käytä tätä koodia Bootstrap -käynnistysmallin runko -osan välissä .

<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning">Save</button> </div> </div> </div> </div>

Modaalikomponentissa käytetään useita CSS -luokkia:

  • Ulommassa div -kääreessä tulee olla ".modal" CSS -luokka. Lisäluokkaa ".fade" käytetään modaalilaatikon häivyttämiseen, joka on valinnainen.

  • Tunnuksen tulee olla sama kuin painikekomponentille asetettu ID -arvo.

  • Muista lisätä muita määritteitä, kuten tabindex, rooli ja aria-hidden.

  • Modaalinen sisältö tulisi lisätä sisälle

    tunnisteet, jotka on tunnistettu luokalla .modal-dialog.

  • Modalilla on paneeli- tai korttirakenne, jossa on sisältö-, otsikko-, otsikko-, runko- ja alatunnisteluokat.

  • Kaikki modaalin osat tulee kääriä a

    .modal-content-luokalla.

  • Yläotsikko-osassa on ".modal-header" -luokka ja siinä on kaksi osaa-otsikko ja painike. Otsikkokomponentti käyttää ".modal-title" ja sitä käytetään otsikon lisäämiseen modaaliseen ponnahdusikkunaan. Painikekomponentteja käytetään sulkeutumiskuvakkeen (X) sisällyttämiseen modaalisen valintaikkunan sulkemiseen.

  • Modaalirunko käyttää luokkaa.

  • Alatunnisteessa on ".modal-footer" ja siinä on kaksi painiketta-toinen sulkemiseen ja toinen tallennukseen. Sulje -painike todella sulkee modaalisen ponnahdusikkunan. Tallennuspainike on kuitenkin tyhjä painike, ja sinun on lisättävä oma koodi tallentaaksesi asiakirjat palvelimelle.

Lopputulos näyttää yksinkertaisesti painikkeelta ja sen napsauttaminen laukaisee ponnahdusikkunan.

Kuinka luoda Bootstrap 5 Modal?

Bootstrap Modal

Voit lisätä minkä tahansa tyyppistä sisältöä modaalisen runko -osan sisälle, ja myös ylä- ja alatunnisteen osissa voi olla muunnelmia.

2 Modaalin luominen vieritettävällä sisällöllä

Kun sisällön pituus on pitkä, sitä voidaan vierittää modaalin sisällä vierittämättä ulkosivua. Alla on koodi vieritettävän modaalisen ponnahdusikkunan luomiseksi.

<button type="button" class="btn btn-danger btn-md" data-toggle="modal" data-target="#Modal2"> Open modal </button> <div class="modal fade" id="Modal2" tabindex="-1" role="dialog" aria-labelledby="Modal2" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Modal with Scrolling Content</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here is the content for modal, enter lengthy content so that you can see the scrolling effect. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-info btn-md">Save</button> </div> </div> </div> </div>

Vieritysmodaali näyttää tältä:

Kuinka luoda Bootstrap 5 Modal?

Vieritettävä modaalinen sisältö

3 Modaalien mitoitus

Mitat tässä osoittavat modaalin leveyden. Voit suurentaa tai pienentää kokoa lisäämällä ".modal-lg"-tai ".modal-sm" -luokan ".modal-dialog" -luokkaan.

Suuremman modaaliruudun täydellinen koodi on alla:

<button class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">Large modal</button> <div class="modal fade example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="LargeModal" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Large Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of large modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger">Save</button> </div> </div> </div> </div>

Samoin koko koodi pienemmille modaalilaatikoille on alla:

<button type="button" class="btn btn-warning" data-toggle="modal" data-target=".example-modal-sm">Small modal</button> <div class="modal fade example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="SmallModal" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Small Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of small modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary">Save</button> </div> </div> </div> </div>

Näet suurempia, oletusarvoisia ja pienempiä modaalikokoja alla.

Kuinka luoda Bootstrap 5 Modal?

Suurempi modaali

Kuinka luoda Bootstrap 5 Modal?

Oletusmodaali

Kuinka luoda Bootstrap 5 Modal?

Pienempi modaali

4 Modaalinen työkaluvihjeellä ja ponnahdusikkunalla

On myös mahdollista lisätä työkaluvihjeitä ja ponnahdusikkunoita modaalisen sisällön sisälle. Alla koodi tämän tekemiseen:

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modaltooltip"> Modal with Popover and Tooltip </button> <!-- Modal --> <div class="modal fade" id="Modaltooltip" tabindex="-1" role="dialog" aria-labelledby="Modaltooltip" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <h5>Popover in Modal</h5> <p>Click button for popover. <a href="#" role="button" class="btn btn-dark" title="Popover Title" data-content="Enter content to be shown inside popover" data-toggle="popover">button</a></p> <hr> <h5>Tooltip in Modal</h5> <p>Hover over <a href="#" title="Tooltip on Top" data-toggle="tooltip">this hyperlink</a> to see a tooltip.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Työkaluvihje ja popover näyttävät alla olevilta. Työkaluvihje näkyy ylhäällä hiirellä ja popover näkyy vasemmalla napsautuksella.

Kuinka luoda Bootstrap 5 Modal?

Popover ja työkaluvinkki modaalisen sisällön sisällä

Huomaa: Muista, että työkaluvihje ja popover tarvitsevat lisää Popper JavaScriptia Bootstrap -komentosarjatiedostojen kanssa. Lisätietoja Saapasraksi työkaluvihjeet ja Saapasraksi popover komponentteja.

5 Ruudukon asettelun lisääminen modaaliseen sisältöön

Bootstrapissa on tehokas flexbox -ruudukon ulkoasujärjestelmä. Voit lisätä sisältöä helposti modaalin sisälle käyttämällä ruudukon asettelusarakkeita. Alla on esimerkki erilaisten ruudukkosarakkeiden lisäämisestä modaaliin.

<button type="button" class="btn btn-dark btn-md" data-toggle="modal" data-target="#Modalgrid"> Modal with Grid </button> <div class="modal fade" id="Modalgrid" tabindex="-1" role="dialog" aria-labelledby="Modalgrid" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container-fluid"> <div class="gridmodal"> <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"> .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> .col-4 .col-sm-6 </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Sen pitäisi näyttää alla selaimessa:

Kuinka luoda Bootstrap 5 Modal?

Modaali ruudukon asettelusisällön kanssa

6 Bootstrap -modaalikomponentin mukauttaminen

Kuten näette, uusimman Bootstrap -version avulla voit lisätä kaikenlaista sisältöä modaaliseen ponnahdusikkunaan. Voit muokata modaalin kunkin kohteen väriä, reunuksia ja ulkoasua lisäämällä ylimääräisiä CSS -tiedostoja itse. Esimerkiksi yllä olevassa ruudukkoesimerkissä olemme käyttäneet mukautettua CSS -luokkaa ".gridmodal" lisätäksesi taustan, reunuksen ja välit kuten alla.

<style> .gridmodal .row>[class^=col-] { padding-top: .75rem; padding-bottom: .75rem; margin-bottom: .75em; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); } </style>

Voit myös lisätä CSS -luokan Bootstrap -oletusluokkiin. Jos esimerkiksi haluat lisätä varjotehosteen modaalipainikkeisiin, voit lisätä vain "btn-md" -luokan, kuten alla.

<!-- Button trigger for modal --> <button type="button" class="btn btn-secondary btn-md" data-toggle="modal" data-target="#Modal1"> Click to launch modal </button> <!-- Modal --> <div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="Modal1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Here goes the content of the modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal">Close</button> <button type="button" class="btn btn-warning btn-md">Save</button> </div> </div> </div> </div>

Olemme lisänneet mukautetun btn-md-luokan kolmeen painikekomponenttiin ja tulos näytetään alla olevassa selaimessa:

Kuinka luoda Bootstrap 5 Modal?

Painikkeet varjotehosteella

Alla on luokat "btn-md" mukautetut CSS-tiedostot, jotka voidaan lisätä HTML-sivun otsikko-osioon… -tagien sisällä. Tai voit lisätä koodin ulkoiseen CSS -tiedostoon (luultavasti teemasi style.css) ja linkittää CSS otsikkoon.

.btn-md { border-width: 0; outline: none; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); cursor: pointer; }

Käärimistä

Modaalit ovat helppo tapa näyttää sisältöä ponnahdusikkunassa. Tämä auttaa paljon keskittymään sivun pääasialliseen sisältöön. Kiinnostuneet käyttäjät voivat napsauttaa linkkiä tai painiketta kutsuakseen modaaliset ikkunat ja lukemaan lisää.


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja