This is the official angular-modal-service Github page.
If you're looking for some examples, check out the angular-modal-service examples here.
For my current project, I am working on developing a "Custom Modal" without relying on Bootstrap. Here's a snippet from the CSS file:
CSS:
#overlay {
position: fixed;
left: 25%;
top: 25%;
padding: 25px;
border: 2px solid black;
background-color: #ffffff;
width: 50%;
height: 50%;
z-index: 100;
}
#fade {
position: fixed;
left: 0%;
top: 0%;
background-color: black;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
width: 100%;
height: 100%;
z-index: 90;
}
#custom-modal.ng-enter {
transition: opacity .5s ease-out;
opacity: 0;
}
#custom-modal.ng-enter.ng-enter-active {
opacity: 1;
}
#custom-modal.ng-leave {
transition: opacity .5s ease-out;
opacity: 1;
}
#custom-modal.ng-leave.ng-leave-active {
opacity: 0;
}
In this project, we have implemented both a "Simple Yes/No Modal" and a "Complex Modal". These modals can be closed by clicking outside of the modal. However, the "Custom Modal" that I am working on currently does not have this functionality.
So, the question remains: How can the "Custom Modal" be closed from outside without using Bootstrap?