Why modal does not working on Angular project? - html

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>

Related

Right align an icon in Bootstrap 4 modal title

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>

Bootstrap Modal backdrops

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>

I created bootstrap modal in website. but i can't open the modal pop-up in safari browser?

<!-- 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>
I created a bootstrap-4 modal pop-up in my website. isn't working for safari browser. except all browsers are working so how can I solve this problem

Modal Changing its class name to seperate from another modal

I used bootstrap 4 to have modal,how can I separate their contents to by changing their class name? I have changed it and tried it but it show up of the same content because of the same class. I'm beginner of using bootstrap and used to create manual css. Now I have decided to adopt it to have a fast development.
I also used data tables which is very useful.
<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>
<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>

How to dismiss buttons with models works in bootstrap?

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 ]