Vitajte na [www.pocitac.win] Pripojiť k domovskej stránke Obľúbené stránky

Domáce Hardware Siete Programovanie Softvér Otázka Systémy
* počítačové znalosti >> otázka >> PC Riešenie problémov >> .

Ako vytvoriť Bootstrap 5 Modal?

Vytvorenie modálu Bootstrap 5 zahŕňa použitie HTML, CSS a JavaScriptu. Tu je podrobný návod, ako vytvoriť modul Bootstrap 5:

HTML:

1. Vytvorte prvok `

` s triedou `modal` a zadajte `id` pre svoj modal.

```html

```

2. Pridajte prvok `

` s triedou `modal-dialog`. Tento prvok bude obsahovať modálny obsah.

```html

```

3. Do „modal-dialog“ pridajte ďalší prvok „

“ s triedou „modal-content“. Tento prvok bude obsahovať skutočný obsah modálu.

```html

```

4. Do prvku „modal-content“ pridajte prvok „

“ s triedou „modal-header“. Tento prvok bude obsahovať modálny názov a tlačidlo zatvorenia.

```html

```

5. Do „modálnej hlavičky“ pridajte modálny názov pomocou znaku „

` a tlačidlo na zatvorenie pomocou elementu `

```

6. Ďalej pridajte prvok `

` s triedou `modal-body`. Tento prvok bude obsahovať hlavný obsah modálu.

```html

```

7. Pridajte obsah, ktorý chcete zobraziť, do modálneho tela. Môže to zahŕňať text, obrázky, formuláre atď.

8. Nakoniec pridajte prvok `

` s triedou `modal-footer`. Tento prvok bude obsahovať všetky tlačidlá akcií, ako napríklad tlačidlo odoslania alebo tlačidlo zatvorenia.

```html

```

9. Do modálnej päty pridajte ľubovoľné tlačidlá akcií, ktoré chcete. Tieto tlačidlá by mali mať triedu `btn` a príslušnú triedu tlačidla Bootstrap (napr. `btn-primary`, `btn-secondary`).

```html

```

CSS:

Pridajte do svojej šablóny so štýlmi nasledujúce štýly CSS:

```css

.modal {

poloha:pevná;

hore:0;

vľavo:0;

z-index:1050;

displej:žiadny;

}

.modal.fade .modal-dialog {

prechod:transformácia 0,3s uvoľnenie;

}

.modal.show .modal-dialog {

transform:translate(0, 0);

}

```

JavaScript:

Ak chcete zobraziť modal, môžete použiť JavaScript na pridanie triedy `show` do elementu `.modal`. Tu je príklad použitia jQuery:

```javascript

$('#exampleModal').modal('show');

```

Ak chcete modal skryť, použite JavaScript na odstránenie triedy `show` z elementu `.modal`.

```javascript

$('#exampleModal').modal('hide');

```

To je všetko! Úspešne ste vytvorili modal Bootstrap 5. Vzhľad a správanie modálu môžete ďalej prispôsobiť pridaním ďalších CSS a JavaScriptu.

Odporúčané články

Najnovšie články

PC Riešenie problémov

Copyright © počítačové znalosti Všetky práva vyhradené