Problems with loading modal in Safari, Firefox and on Smartphone



  • I have a wierd situation, where my webpage used to lad just fine, before I put it online with hosting and domain. Now the Modal, that's supposed to popup on click, takes so long to load, that it undermines the whole purpose of the page. And so it's a real problem. At this point it seems to lad just fine in chrome though.

    I have tried several things, for example thoroughly checking my FTP-client, deleting, editing code, re-uploading but at this point, nothing has worked. Can anyone offer some infight as to where I go wrong?

    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>
    </html>
    


  • Try to create a vanilla sandbox and then share the link with us.

    https://codesandbox.io/

    Let me know if you need help on how to do that.


Log in to reply