Hello everyone, I've encountered an issue with my Bootstrap modal on Mozilla browser. Everything works perfectly on Chrome and Safari, but when I click the modal button in Mozilla, nothing happens. Here's a snippet of my code:
<button type="button" class="btn btn-lg accountBtn">
<a href="#modal1" data-toggle="modal">Account details</a>
</button>
<div class="modal fade" id="modal1" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2>Header h2</h2>
<h3>Header h3</h3>
<ul class="characteristicsList">
Characteristics:
<li><img src="images/modal1.png" alt="">Property: </li>
<li><img src="images/modal2.png" alt="">Property: </li>
<li><img src="images/modal3.png" alt="">Property: </li>
</ul>
<button type="button" class="btn btn-lg buyBtn">
<a href="myPaypalLink" target="_blank">Buy Now X$</a>
</button>
</div>
</div>
</div>
</div>
In addition, I noticed that the button with "a" tag isn't working on Mozilla both inside and outside of the modal:
<button type="button" class="btn btn-lg buyBtn">
<a href="myPaypalLink" target="_blank">Buy Now X$</a>
</button>
Any suggestions on how to fix this?