Modal Changing its class name to seperate from another modal - html

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>

Related

Why modal does not working on Angular project?

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>

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

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 ]

Button type="button" still refreshing page and not enabling modal to load

Hello I read through some stackoverflow questions and saw that changing a button type to button enables the modal to load instead of refreshing the page, however I am still getting the page refresh behaviour with the following html structure:
.html
<div class="shop-item-overlay">
<button type="button" class="quickview" data-toggle="modal" data-target="#myModal">{{context.quickView}}</button>
<button type="button" class="heart">
<span class="sr-only">{{context.wishlist}}</span>
</button>
</div>
<!-- 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">Quickview</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>
There is no external css or js acting upon these classes. The modal button is type="button", any ideas where the problem might be?