Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Example Code:
<ng-template #DefaultModelContent let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel1">Basic Modalh4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×span>
button>
div>
<div class="modal-body">
<h5>Check First Paragraphh5>
<p>Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple
pie.
Brownie carrot
cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake
cookie
chocolate cake
liquorice. Apple pie sugar plum powder donut soufflé.p>
<p>Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice
cream.
Danish candy
cake.p>
<hr>
<h5>Some More Texth5>
<p>Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll
bonbon
toffee danish.
Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop
candy
cookie biscuit pie.p>
<div>
<div class="modal-footer">
<button type="button" class="btn grey btn-outline-secondary"
(click)="d('Close modal')" ngbAutofocus>Closebutton>
<button type="button" class="btn btn-outline-primary">Save changesbutton> div>
<ng-template>
Modal options | Class | Description |
---|---|---|
Background modal color | .bg-* |
Use any template color from COLOR PALETTE that you like to use for modal background. |
Border modal color | .border-* |
Use any template color from COLOR PALETTE that you like to use for modal border color. |
Modal sizes | .modal-[xl/lg/sm/xs] |
Different sizes of modal that can be used for different examples. |
There are so many features that can be used for modals. Like :
- Different heading options
- Different animation to open modal, etc...
You can also create button dropdowns and split button using .btn-group
wrapper.
Referrals :
Type | URL |
---|---|
NG-Bootstrap Modal | https://ng-bootstrap.github.io/#/components/modal/ |
Bootstrap Modal | https://getbootstrap.com/docs/4.2/components/modal/ |
Template Page | https://modernadmin.evolvision.com/components/modals |