My website was working perfectly fine until I launched it with hosting and a domain. Now, the Modal that is supposed to pop up when clicked is taking too long to load on Safari, Firefox, and IOS, which defeats the purpose of the page. This issue seems to be specific to these browsers while Chrome loads it without any problems.
I have tried various troubleshooting methods such as checking my FTP client, deleting and editing code, re-uploading files, but nothing has resolved the issue. Can someone provide insights into what may be causing this problem?
window.onload = function() {
const span = document.querySelectorAll(".PopUp");
span.forEach(item => {
item.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
const projectNode = e.target.parentNode.parentNode;
if (!projectNode.matches('.Project, .modal-content')) return;
e.preventDefault();
if (projectNode.matches('.Project')) {
document.getElementById(projectNode.dataset.modal).style.display = "block";
} else {
projectNode.parentNode.style.display = "";
}
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="ModalPopUp.js"></script>
</head>
<body>
<div class="content">
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">
Lirma Type
</span>
<span id="year">
2019
</span>
<div class="Describtion">
<p>Typedesign</p>
<br>
<span class="PopUp">Images</id>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
<script src="ModalHide.js"></script>
<script src="pExpand.js"></script>