TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag Bootstrap 5 Modal?

1

Bootstrap 5 Modal är i grunden ett popup -fönster som visas när du klickar på ett element som knapp eller textlänk. Den använder JavaScript för att visa innehållet vid klick med ljusbox -effekt. Den modala popupen kan stängas antingen genom att klicka på stängningsknappen eller genom att klicka utanför modalfönstret. Modal refereras också till med många andra namn som popup, dialog eller varning. Observera att denna popup -varning skiljer sig från den ursprungliga Bootstrap -varningskomponenten.

Låt oss i denna handledning skapa några modala popup -fönster för att förstå detaljerna i komponenten.

Bootstrap 5 Modal handledning

Denna handledning täcker följande ämnen:

  1. Modal utlöses vid knappklick
  2. Rulla innehåll inuti modal
  3. Storlek på modeller
  4. Modal med verktygstips och popover
  5. Använda rutnätlayout inuti modalt innehåll
  6. Anpassa modal komponent

1 Skapa en enkel modal triggad på knappklick

En Bootstrap -modal innehåller två komponenter – knapp och modalfönster. Nedan är knappkoden för en modal:

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

Som du ser är det bara en knappkomponent med ytterligare attribut:

  • Attributet data-toggle = "modal" används för att identifiera knappen som en modal komponent.
  • Därefter är data-target = "#Modal1 ″ som är ett ID bör vara unikt. Samma ID måste användas i modalkomponenten.

Nedan finns koden för den modala popupen, du bör använda den här koden mellan kroppsdelen i Bootstrap -startmallen.

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

Det finns flera CSS -klasser som används i en modal komponent:

  • Den yttre div -omslaget ska ha en ".modal" CSS -klass. Den extra ".fade" -klassen används för att bleka modalboxen som är valfri.

  • ID: t bör vara detsamma som ID -värdet för knappkomponenten.

  • Se till att lägga till andra attribut som tabindex, roll och aria-dold.

  • Det modala innehållet bör läggas till inom

    taggar identifierade med klassen ".modal-dialog".

  • Modal har en panel eller kort struktur med innehåll, header, titel, kropps- och sidfot klasser.

  • Alla delar av modalen ska lindas inuti a

    med klassen ".modal-content".

  • Rubriksektionen identifieras med klassen ".modal-header" och har två komponenter-titel och knapp. Titelkomponenten använder ".modal-title" och används för att lägga till en rubrik till den modala popupen. Knappkomponenterna används för att inkludera stängningsikonen (X) för att stänga den modala dialogrutan.

  • Modalkroppen använder klassen ".modal-body" och innehåller modalets kropp som kan vara alla element som text, knapp, verktygstips eller popover.

  • Sidfotsdelen använder “.modal-footer” och innehåller två knappar-en för stängning och en annan för att spara. Stängknappen stänger faktiskt den modala popupen. Men spara -knappen är en dummy -knapp och du bör lägga till din egen kod för att spara dokumenten på servern.

Den slutliga utmatningen kommer helt enkelt att se ut som en knapp och att klicka på den kommer att utlösa en popup -modalruta.

Hur skapar jag Bootstrap 5 Modal?

Bootstrap Modal

Du kan lägga till vilken typ av innehåll som helst i den modala kroppsdelen och även ha variationer i sidhuvud och sidfot.

2 Skapa Modal med rullande innehåll

När innehållslängden är lång kan den rullas i modalen utan att rulla på utsidan. Nedan finns koden för att skapa rullbar modal popup.

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

Scrollmodalen kommer att se ut nedan:

Hur skapar jag Bootstrap 5 Modal?

Rullbart modalt innehåll

3 Storlek på modeller

Storleken här anger bredden på modalen. Du kan öka eller minska storleken genom att lägga till klassen ".modal-lg" eller ".modal-sm" till klassen ".modal-dialog".

Den fullständiga koden den större modal rutan ges nedan:

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

På samma sätt är den fullständiga koden för mindre modalbox enligt nedan:

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

Du kan se större, standard och mindre modalstorlekar enligt nedan.

Hur skapar jag Bootstrap 5 Modal?

Större Modal

Hur skapar jag Bootstrap 5 Modal?

Standardmodal

Hur skapar jag Bootstrap 5 Modal?

Mindre Modal

4 Modal med Tooltip och Popover

Det är också möjligt att infoga verktygstips och pop -ups i modalinnehållet. Nedan är koden för att göra det:

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

Verktygstipset och popup -fönstret kommer att se ut nedan. Verktygstipset visas överst vid svävar och popup -fönstret visas i vänster vid klick.

Hur skapar jag Bootstrap 5 Modal?

Popover och Tooltip Inside Modal Content

Obs! Kom ihåg verktygstips och popover behöver ytterligare Popper -JavaScript tillsammans med Bootstrap -skriptfiler. Läs mer om Bootstrap verktygstips och Bootstrap popover -komponenter.

5 Infoga rutnätlayout inuti modalt innehåll

Bootstrap har ett kraftfullt flexbox -layoutsystem. Du kan enkelt infoga innehåll i modalen med hjälp av kolumner med rutnätlayout. Nedan är ett exempel för att infoga olika typer av rutnätskolumner i en modal.

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

Det ska se ut nedan i webbläsaren:

Hur skapar jag Bootstrap 5 Modal?

Modal med rutnätlayoutinnehåll

6 Anpassa Bootstrap Modal Component

Som du ser kan du med den senaste Bootstrap -versionen lägga till vilken typ av innehåll som helst i den modala popupen. Du kan anpassa färgen, ramarna och utseendet på varje objekt i modalen med ytterligare CSS på egen hand. Till exempel i ovanstående rutnätsexempel har vi använt en anpassad CSS -klass ".gridmodal" för att lägga till bakgrund, kant och avstånd som nedan.

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

Du kan också lägga till CSS -klassen till standard Bootstrap -klasser. Till exempel, när du vill lägga till skuggaeffekt till modalknapparna kan du bara lägga till "btn-md" -klassen som nedan.

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

Vi har lagt till den anpassade “btn-md” -klassen till de tre knappkomponenterna och resultatet kommer att visas som nedan i webbläsaren:

Hur skapar jag Bootstrap 5 Modal?

Knappar med skuggaeffekt

Den anpassade CSS för klassen "btn-md" ges nedan som kan läggas till i rubrikdelen av HTML-sidan inom … taggar. Eller så kan du lägga till koden i extern CSS -fil (förmodligen ditt temas style.css “och länka CSS i rubriken.

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

Avslutar

Modaler är ett enkelt sätt att visa innehåll i en popup -dialogruta. Detta hjälper mycket att fokusera på huvudinnehållet som erbjuds på sidan. Intresserade användare kan klicka på länken eller knappen för att öppna modalfönstren och läsa vidare.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer