Having an issue with my modal not functioning properly in Chrome. When I click on it, only the background fades and both the before and after content load in the Chrome Dev tools simultaneously with no visible content in between.
Here is a link to the Codepen showcasing the issue: codepen.io/tnguyenbco/pen/BLjGbV
I have linked the modal body to another HTML file, which should load and pop up upon clicking.
Below is the CSS code:
.modal {
background: rgba(45,160,224,0.95);
}
.modal-dialog {
width: auto;
margin: 0;
}
.modal.fade .modal-dialog, .modal.in .modal-dialog {
transform: none;
}
.modal-backdrop.in {
opacity: 0;
}
#myModal .modal-content {
border: 0;
border-radius: 0;
box-shadow: none;
padding: 81px 0;
background: none;
color: #ffffff;
}
.modal-title {
margin-bottom: 16px;
font-weight: 700;
}
.exit-modal {
font-size: 48px;
text-align: right;
line-height: 1;
margin-bottom: 24px;
}
The HTML code used to link the modal is as follows:
<a href="service-1-modal.html" data-toggle="modal" data-target="#myModal">