'Disapearing Modal

I have inserted the following code in Sharepoint and each time I click on the button to open modal, it opens but only for a few moments, then it automatically closes. However, when using this exact same code outside of sharepoint, it works just fine.

Below is the code that I have been using:

<div class="icons">
    <div class="icon-boxes">
        <div class="icon-boxes-Asset">
            <div class="zoom2">
            <button class="btn-Asset" id="myBtn-Asset">
            <img class="image-icon" src="Asset.jpg" alt=""><p>Asset</p>
            </button>
            </div>
        </div>
    </div>
</div>

<!-- This is the MODAL section, this popup section for each icon -->
<!-- This is the Asset Forfeiture MODAL section -->
<div class="Asset-Modal">
    <div id="myModal-Asset" class="modal-Asset">

        <!-- Modal Design  -->
        <div class="modal-content-Asset">
            <div class="Asset-content">
                <img class="image-icon" src="Asset.jpg" alt="">
                <div class="Heading-Asset">
                    <div class="Heading-Asset-Name" alt="">
                        <h2>Asset Page</h2></div>
                    <div class="Heading-Asset-Address" alt="">
                        <h3>Washington State</h3></div>
                </div>
                <span class="close-Asset">&times;</span>
            </div>
            <div class="line"></div>
            <div class="Asset-content-info">
                <body>Lorem</body>
                <br>
                <br>
                <body>Lorem.</body>
                <p>Contact: (A) SOS Phillip (360) 333-3333</p>
                <p><a href="#">Asset Page</a></p>
            </div>
        </div>
    </div>

    <script>
        // Get the modal
        var modal = document.getElementById("myModal-Asset");
        
        // Get the button that opens the modal
        var btn = document.getElementById("myBtn-Asset");
        
        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close-Asset")[0];
        
        // When the user clicks the button, open the modal 
        btn.onclick = function() {
        modal.style.display = "block";
        }
        
        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
        modal.style.display = "none";
        }
        
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
        }
        </script>
 </div>
 <!----------------------------------------->

sharepoint modal-dialog

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Disapearing Modal

Sources

Related Questions