Multiple Modals on one page

UuschiMar 8, 2023

Is it possible to have multiple modal pages on one page? I have 3 different coupons that need separate pop up windows so the customer can print the coupon on the page.

Example of Script:

<div class="row mt-5">
<div class="col-md-4">

<br><br>
<button class="btn btn-danger me-2 mt-10" data-bs-toggle="modal" data-bs-target=".bs-example-modal-centered">Print Coupon</button>
<div class="modal fade bs-example-modal-centered" tabindex="-1" role="dialog" aria-labelledby="centerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button></div>
<div class="modal-body">
<p align="center" class="mb-10">

</p>
<p align="center"><button class="btn btn-danger me-2" onclick="window.print()">Print this page</button> <button class="btn btn-danger me-2">Call Now</button></p>
</div></div></div></div></div>

<div class="col-md-4">

<br><br>
<button class="btn btn-danger me-2 mt-10" data-bs-toggle="modal2" data-bs-target=".bs-example-modal-centered">Print Coupon</button>
<div class="modal2 fade bs-example-modal-centered" tabindex="-1" role="dialog" aria-labelledby="centerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header"><h4 class="modal-title" id="myModalLabel"></h4>
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal2" aria-hidden="true"></button></div>
<div class="modal-body">
<p align="center" class="mb-10">

</p>
<p align="center"><button class="btn btn-danger me-2" onclick="window.print()">Print this page</button> <button class="btn btn-danger me-2">Call Now</button></p>
</div></div></div></div></div>

<div class="col-md-4">

<br><br>
<button class="btn btn-danger me-2 mt-10" data-bs-toggle="modal3" data-bs-target=".bs-example-modal-centered">Print Coupon</button>
<div class="modal fade bs-example-modal-centered" tabindex="-1" role="dialog" aria-labelledby="centerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="modal-body">
<p align="center" class="mb-10">

</p>
<p align="center"><button class="btn btn-danger me-2" onclick="window.print()">Print this page</button> <button class="btn btn-danger me-2">Call Now</button></p>
</div></div></div>
</div></div></div>

SSemicolon WebSTAFFMar 9, 2023

Hello,

It is definitely possible to have multiple modals on the page. Consider using the following code:
[ch_pre]
Modal 1

			Modal 1
			
		
		
			Modal 1
		
		
			Close
			Save changes

Modal 2

			Modal 2
			
		
		
			Modal 2
		
		
			Close
			Save changes

[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.