Проблемы с загрузкой модала в Safari, Firefox и на смартфоне - PullRequest
Новая
       12

Проблемы с загрузкой модала в Safari, Firefox и на смартфоне

0 голосов
/ 09 марта 2020

У меня странная ситуация, когда моя веб-страница работала нормально, прежде чем я разместил ее в сети с хостингом и доменом. Теперь модал, который должен появляться при нажатии, загружается так долго, что подрывает всю цель страницы. И это настоящая проблема. На данный момент, кажется, все нормально в chrome.

Я попробовал несколько вещей, например, тщательно проверил мой FTP-клиент, удалил, отредактировал код, повторно загрузил, но на данный момент ничего работал. Кто-нибудь может подсказать, где я go не прав? 

window.onload = function() {
    const span = document.querySelectorAll(".PopUp");
    span.forEach(LIelm => {
        LIelm.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>
...