Why is only one of my two modals showing?

Why is only one of my two modals showing?

I have two modals on the same page. One of them shows just fine. The second one, however, doesn't show. Only the dark "opacity" screen shows, but not the modal itself. I've read other posts and nothing seems to work for me.

I have two modals on the same page. One of them shows just fine. The second one, however, doesn't show. Only the dark "opacity" screen shows, but not the modal itself. I've read other posts and nothing seems to work for me.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button type="button" class="btn btn-primary mt-4 ml-2 mb-4" data-toggle="modal" data-target="#modalPublishWithAccount">Usuario registrado quiere publicar</button>

<button type="button" class="btn btn-success mt-4 ml-2 mb-4" data-toggle="modal" data-target="#solicitarArriendoWithAccountModal">Usuario registrado quiere publicar</button>

<!-- MODAL THAT WORKS --> <div class="modal fade bd-example-modal-lg registration-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalPublishWithAccount"> <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-content registration-modal-content"> <div class="modal-header registration-modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body modal-body-img registration-modal-body text-center col-lg-8 col-md-8 pb-5 pt-0 mx-auto"> I'm the modal that works </div> </div> </div> </div> <!-- /MODAL THAT WORKS -->

<!-- MODAL THAT DOESN'T WORK --> <div class="modal fade bd-example-modal-lg registration-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="solicitarArriendoWithAccountModal" style="z-index:10;"> <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-content registration-modal-content"> <div class="modal-header registration-modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body modal-body-img registration-modal-body text-center col-lg-8 col-md-8 pb-5 pt-0 mx-auto"> I'm the modal that doesn't work </div> </div> </div> </div> <!-- /MODAL THAT DOESN'T WORK -->

<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://code.jquery.com/jquery-3.2.1.slim.min.js"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string">"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>&gt;&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string">"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>&gt;&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string">"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>&gt;&lt;/<span class="hljs-name">script</span>&gt;</span>


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

Angular Bootstrap Tutorial - Building Websites with Angular Bootstrap

In this Angular Bootstrap tutoria will help you learn to create beautiful websites easily using Bootstrap along with Angular. You'll learn: What is Angular? What is Bootstrap? Creating an Angular Application; Embedding Bootstrap with Angular

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Bootstrap is one of the open source that many developers love. So what do we expect of the new changes when Bootstrap 5 is released?