I have 2 different bootstrap modals on a single page I would like the 2 .modal-backdrop classes to behave differently. How do I achieve that?
Here is the sample code:
<!-- Cancel Modal -->
<div class="modal fade" id="cancelModal"
tabindex="-1" role="dialog" aria-labelledby="cancelModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cancelModalLabel">Cancel Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to cancel the form?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"
(click)="cancel()">Yes</button>
</div>
</div>
</div>
</div>
<!-- Submit Modal -->
<div class="modal fade" id="submitModal" tabindex="-1"
role="dialog" aria-labelledby="submitModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="submitModalLabel">Submit Warning</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to submit and close the form?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" routerLink="/submission"
(click)="submitForm()">Yes</button>
</div>
</div>
</div>
</div>
Related
I used bootstrap's modal on my Angular Project, but it does not work. How can I handle with this error? I also used [ngStyle] for handling this problem with angular variables as [ngStyle]='display: displayValue'. Also, it does not work.
Code as below:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You said you use bootstrap 5, then change the data- attributes to data-bs- as explained in Javascript section inside the list of migration changes in bootstrap 5 (https://getbootstrap.com/docs/5.0/migration/).
use this code if you are using bootstrap 5
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I'm trying to place two icons next to the close button in the Bootstrap 4 modal. However, there's some margin-left which I'm unable to remove it. In inspect element, I manage to get it done but when I apply that to the .close or button class, it doesn't work!
DEMO: https://jsfiddle.net/x2m3kfzu/
HTML:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">©</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
CSS:
.close, button {
margin-left: 0 !important;
}
Just wrap the buttons inside a div.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">©</span>
</button>
</div>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have a "customers" component (parent component), and it is related with "customer-page" component (child component).
In parent component, there is a modal, calling child component. In child component there are two more models which work as if all of those three are in the same component.
But when i close the modal of child component, it also closes the parent component's modal.
How can i fix that?
Customers Component HTML (Parent component HTML):
<button type="button" class="btn btn-primary btn-sm" id="mymodal" data-toggle="modal" data-target="#myModal">Customer's Page</button>
<div class="container">
<div class="row">
<div class="modal fade bd-example-modal-xl" id="myModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">customer info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<app-customer-page [customer]="currentCustomer"></app-customer-page>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
Customer-Page HTML (Child Component HTML):
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal-inner" title="Edit"><i class="far fa-edit"></i></button>
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target=".bd-example-modal-sm" title="Delete"><i class="far fa-trash-alt"></i></button>
<div class="container">
<div class="row">
<div class="modal fade bd-example-modal-lg" id="myModal-inner" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Customer Info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<app-add-order [order]="currentOrder"></app-add-order>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="modal fade bd-example-modal-sm" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Attention</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>This operation cannot be undone. Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger">Delete</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
Customer Page Component HTML
data-toggle="modal"
Your modals are binded to same variable named modal. Use different name for each modal in data-toggle.
I want to know that, why dismiss button does not work when I'm using it with model. Please visit the below link and suggest me how it is possible ?
http://builderfunding.co.in/doylesweb/index.html
Here is the code -
`
<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#myModal">My Booking</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#myModal1">How it Works?</button>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
`
Hi its because your css code model and modal-backdrop both codes having almost same z-index values
.modal {
z-index: 1050;
}
.modal-backdrop{
z-index:1040;
}
remove modal-backdrop z-index , it will work fine (Bootstrap.min.css)
[ http://builderfunding.co.in/doylesweb/index.html ]
The following example markup is taken directly from the Bootstrap docs:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I see little use for using the modal-header, modal-body and modal-footer div tags. Aside from styling, are there any implications of leaving out these tags and displaying everything inside modal-content? For example:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>