🤩
Windframe Import Update is finally here.

Modal

Angular Bootstrap Modal

Angular Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.

The Modal is a dialog box/popup window which can be used for light boxes, user notifications, UI enhancements, e-commerce components and many other cases.

It's easily customized. You can manipulate size, position, and content.

Importing the Contrast Angular Bootstrap Modal Module

To use the Contrast Angular Bootstrap Modal component in your project you need to import ModalModule.

Custom Modal

Angular Bootstrap Custom Modal

html
html
<CDBBtn (click)="modal1.toggleModal()" color="dark">
Modal
</CDBBtn>
<CDBModal #modal1="cdbModal" [centered]=true>
<CDBCard>
<CDBCardImage class="img-fluid" src="/assets/img/modal.jpg"></CDBCardImage>
<CDBCardBody>
<CDBCardTitle>Title</CDBCardTitle>
<CDBCardText>
Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
orcane faucibus ex, non facilisis nisl. Maexenas aliquet
mauris ut tempus. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur iste
officiis porro hic corrupti laborum voluptatem ratione exercitationem voluptates amet accusamus
accusantium rerum consequuntur deserunt vero eius, ipsa repellat. Voluptate explicabo deleniti
laudantium accusantium minima laborum voluptatibus ipsam sapiente quo! Aliquid aspernatur
facilis quos recusandae eius porro expedita minima molestias, eaque nobis omnis unde sint, alias
ipsa dicta non voluptatibus doloremque quod ad cumque, consequatur soluta. Vitae soluta
doloribus cumque iste nesciunt. Veniam eum deserunt placeat veritatis, aspernatur aperiam amet
exercitationem fugiat ullam voluptatem nostrum rem impedit doloremque magni voluptate sunt
asperiores aliquam excepturi unde ipsam possimus! Optio sapiente aut et blanditiis repellendus
nulla numquam voluptatem excepturi, consequuntur pariatur. Quo suscipit harum magnam excepturi
magni nulla, quasi eos iste. Laboriosam quisquam eaque omnis inventore at obcaecati nemo
possimus animi asperiores ducimus, fugiat velit, hic, molestiae numquam. Repellendus, cumque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut adipisci blanditiis obcaecati
temporibus dolorum dignissimos officia perferendis id quis ratione delectus pariatur odio
repudiandae alias modi, vitae voluptatem fugiat beatae neque accusamus corrupti! A vero optio
totam suscipit. Delectus quaerat repellat dolores adipisci earum a at cumque cupiditate sit
eaque.
</CDBCardText>
<div class="d-flex">
<div class="d-flex justify-content-start" style="flex: 50%">
<CDBBtn color="light" [flat]=true>
Label
</CDBBtn>
</div>
<div class="d-flex justify-content-end" style="flex: 50%">
<CDBBtn color="white" [flat]=true (click)="modal1.toggleModal()">
Cancel
</CDBBtn>
<CDBBtn color="dark" [flat]=true (click)="modal1.toggleModal()">
Done
</CDBBtn>
</div>
</div>
</CDBCardBody>
</CDBCard>
</CDBModal>

Modal Sizes

Angular Bootstrap Modal Sizes

html
html
<CDBBtn color="light" [flat]=true (click)="modal2.toggleModal()">
Medium modal
</CDBBtn>
<CDBModal #modal2="cdbModal">
<CDBCard [border]=true>
<CDBCardImage class="img-fluid" src="/assets/img/modal.jpg"></CDBCardImage>
<CDBCardBody>
<CDBCardTitle>Title</CDBCardTitle>
<CDBCardText>
Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
orcane faucibus ex, non facilisis nisl. Maexenas aliquet
mauris ut tempus.
</CDBCardText>
<div class="d-flex">
<div class="d-flex justify-content-start" style="flex: 50%">
<CDBBtn color="light" [flat]=true>
Label
</CDBBtn>
</div>
<div class="d-flex justify-content-end" style="flex: 50%">
<CDBBtn color="white" [flat]=true (click)="modal2.toggleModal()">
Cancel
</CDBBtn>
<CDBBtn color="dark" [flat]=true (click)="modal2.toggleModal()">
Done
</CDBBtn>
</div>
</div>
</CDBCardBody>
</CDBCard>
</CDBModal>
<CDBBtn color="light" [flat]=true (click)="modal3.toggleModal()">
Small modal
</CDBBtn>
<CDBModal #modal3="cdbModal" size="sm">
<CDBCard>
<CDBCardImage class="img-fluid" src="/assets/img/modal.jpg"></CDBCardImage>
<CDBCardBody>
<CDBCardTitle>Title</CDBCardTitle>
<CDBCardText>
Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
orcane faucibus ex, non facilisis nisl. Maexenas aliquet
mauris ut tempus.
</CDBCardText>
<div class="d-flex">
<div class="d-flex justify-content-start" style="flex: 50%">
<CDBBtn color="light" [flat]=true>
Label
</CDBBtn>
</div>
<div class="d-flex justify-content-end" style="flex: 50%">
<CDBBtn color="white" [flat]=true (click)="modal3.toggleModal()">
Cancel
</CDBBtn>
<CDBBtn color="dark" [flat]=true (click)="modal3.toggleModal()">
Done
</CDBBtn>
</div>
</div>
</CDBCardBody>
</CDBCard>
</CDBModal>
<CDBBtn color="light" [flat]=true (click)="modal4.toggleModal()">
Large modal
</CDBBtn>
<CDBModal #modal4="cdbModal" size="lg">
<CDBCard [border]=true>
<CDBCardBody>
<CDBCardTitle>Title</CDBCardTitle>
<CDBCardText>
Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
orcane faucibus ex, non facilisis nisl. Maexenas aliquet
mauris ut tempus.
</CDBCardText>
<div class="d-flex">
<div class="d-flex justify-content-start" style="flex: 50%">
<CDBBtn color="light" [flat]=true>
Label
</CDBBtn>
</div>
<div class="d-flex justify-content-end" style="flex: 50%">
<CDBBtn color="white" [flat]=true (click)="modal4.toggleModal()">
Cancel
</CDBBtn>
<CDBBtn color="dark" [flat]=true (click)="modal4.toggleModal()">
Done
</CDBBtn>
</div>
</div>
</CDBCardBody>
</CDBCard>
</CDBModal>
<CDBBtn color="light" [flat]=true (click)="modal5.toggleModal()">
Fluid modal
</CDBBtn>
<CDBModal #modal5="cdbModal" size="fluid">
<CDBCard [border]=true>
<CDBCardBody>
<CDBCardTitle>Title</CDBCardTitle>
<CDBCardText>
Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla
orcane faucibus ex, non facilisis nisl. Maexenas aliquet
mauris ut tempus.
</CDBCardText>
<div class="d-flex">
<div class="d-flex justify-content-start" style="flex: 50%">
<CDBBtn color="light" [flat]=true>
Label
</CDBBtn>
</div>
<div class="d-flex justify-content-end" style="flex: 50%">
<CDBBtn color="white" [flat]=true (click)="modal5.toggleModal()">
Cancel
</CDBBtn>
<CDBBtn color="dark" [flat]=true (click)="modal5.toggleModal()">
Done
</CDBBtn>
</div>
</div>
</CDBCardBody>
</CDBCard>
</CDBModal>

Modal Positions

Angular Bootstrap Modal Positions

html
html
<CDBBtn color="dark" [flat]=true (click)="modal6.toggleModal()">
Top right
</CDBBtn>
<CDBModal #modal6="cdbModal" position="top-right">
<CDBModalHeader [toggle]="modal6">Title</CDBModalHeader>
<CDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</CDBModalBody>
<CDBModalFooter>
<CDBBtn color="dark" [flat]=true (click)="modal6.toggleModal()">
Close
</CDBBtn>
<CDBBtn color="light" [flat]=true (click)="modal6.toggleModal()">
Save changes
</CDBBtn>
</CDBModalFooter>
</CDBModal>
<CDBBtn color="dark" [flat]=true (click)="modal7.toggleModal()">
Bottom left
</CDBBtn>
<CDBModal #modal7="cdbModal" position="bottom-left">
<CDBModalHeader [toggle]="modal7">Title</CDBModalHeader>
<CDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</CDBModalBody>
<CDBModalFooter>
<CDBBtn color="dark" [flat]=true (click)="modal7.toggleModal()">
Close
</CDBBtn>
<CDBBtn color="light" [flat]=true (click)="modal7.toggleModal()">
Save changes
</CDBBtn>
</CDBModalFooter>
</CDBModal>
<CDBBtn color="dark" [flat]=true (click)="modal8.toggleModal()">
Top Left
</CDBBtn>
<CDBModal #modal8="cdbModal" position="top-left">
<CDBModalHeader [toggle]="modal8">Title</CDBModalHeader>
<CDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</CDBModalBody>
<CDBModalFooter>
<CDBBtn color="dark" [flat]=true (click)="modal8.toggleModal()">
Close
</CDBBtn>
<CDBBtn color="light" [flat]=true (click)="modal8.toggleModal()">
Save changes
</CDBBtn>
</CDBModalFooter>
</CDBModal>
<CDBBtn color="light" [flat]=true (click)="modal9.toggleModal()">
Bottom right
</CDBBtn>
<CDBModal #modal9="cdbModal" position="bottom-right">
<CDBModalHeader [toggle]="modal9">Title</CDBModalHeader>
<CDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</CDBModalBody>
<CDBModalFooter>
<CDBBtn color="dark" (click)="modal9.toggleModal()">
Close
</CDBBtn>
<CDBBtn color="light" [flat]=true (click)="modal9.toggleModal()">
Save changes
</CDBBtn>
</CDBModalFooter>
</CDBModal>
<CDBBtn color="light" [flat]=true (click)="modal10.toggleModal()">
Center
</CDBBtn>
<CDBModal #modal10="cdbModal">
<CDBModalHeader [toggle]="modal10">Title</CDBModalHeader>
<CDBModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</CDBModalBody>
<CDBModalFooter>
<CDBBtn color="dark" (click)="modal10.toggleModal()">
Close
</CDBBtn>
<CDBBtn color="light" [flat]=true (click)="modal10.toggleModal()">
Save changes
</CDBBtn>
</CDBModalFooter>
</CDBModal>

API Reference: Contrast Angular Bootstrap Modal Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Modal component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBModal.

NameTypeDefaultDescriptionExample
classStringAdds custom modal-content classesclass="myClass"
wrapperClassStringAdds custom class to wrapper containerwrapperClass="myClass"
modalClassStringAdds custom modal-dialog elementmodalClass="myClass"
contentClassStringAdds custom modal-content classescontentClass="myClass"
backdropClassStringAdds custom class to modal-backdrop elementbackdropClass="myClass"
disableBackdropBooleanfalseDisable backdrop if this prop is true.disableBackdrop=true
animationStringChanges direction of animation. Choose from top / bottom / right / left.animation="bottom"
autoFocusBooleantrueDefines if modal should receive focusautoFocus=false
backdropBooleantrueIf false, the backdrop is not rendered.backdrop=false
cascadingBooleanfalseAdds cascading-class to modal-dialog elementcascading=true
centeredBooleanfalseAdd custom class to modal-dialog elementcentered=true
disableFocusTrapBooleantrueIf true, removes focus trap effect.disableFocusTrap=false
fadeBooleantrueRemoves transitionfade=false
frameBooleanfalseChanges the position of the modal. It has to be used along with position prop equal to bottom / topframe=true position="bottom"
fullHeightBooleanfalseChanges the position of the modal. It has to be used along with position prop equal to bottom / topfullHeight=true position="bottom"
isOpenBooleantrueIf true, removes focus trap effect.isOpen=Modal
keyboardBooleantrueCloses the modal when the escape key is pressed.keyboard=false
labelledByStringChanges aria-labelledby attributelabelledBy="myLabel"
modalStyleStringPredefines modal style. Choose one of success / info / danger / warning.modalStyle="warning"
positionStringChanges the position of the modalposition="top-right"
sideBooleanfalseChanges the position of the modal. It has to be used along with position prop equal to bottom-right/bottom-left/top-right/top-leftside=true position="bottom-left"
sizeStringChanges the size of the modal. Choose from sm / lg / fluidsize="fluid"
togglefunctionDefines function which fires on close/open eventtoggle=myFunction
hiddenModalfunctionThis event is fired after the modal is closed.hiddenModal=myFunction
hideModalfunctionThis event is fired just before the modal is hidden.hideModal=myFunction
showModalfunctionThis event is fired just before the modal is open.showModal=myFunction

API Reference: Contrast Modal Body Properties

The table below shows the configuration options of the CDBModalBody component.

NameTypeDefaultDescriptionExample
classStringAdds custom class ModalBody componentclass="myClass"

API Reference: Contrast Modal Footer Properties

The table below shows the configuration options of the CDBModalFooter component.

NameTypeDefaultDescriptionExample
classStringAdds custom class ModalFooter componentclass="myClass"

API Reference: Contrast Modal Header Properties

The table below shows the configuration options of the CDBModalHeader component.

NameTypeDefaultDescriptionExample
classStringAdds custom class ModalHeader componentclass="myClass"
titleClassStringAdds custom class to title element.titleClass="myTitleClass"
closeArialLabelStringCloseDefines custom label for close buttoncloseArialLabel="myClass"
togglefunctionDefines function which fires on close/open eventtoggle=myFunction

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast