mercredi 5 décembre 2018

Creating a function in Javascript and using it with a button

I am trying to get this button to run the function. I know I can get rid of 'function showWeb' in the Javascript and the code will be running fine, I am trying to get it to work so that I can use it as a function so I can make an instance of the object.

<button id='myBtn' onclick='showWeb()'>Open Modal</button>
<div id='myModal' class='modal'>
    <div class='modal-content'>
        <span class='close'>&times;</span>
        <p>$link</p>
    </div>
</div>      


<script>
        function showWeb(){
        // Get the modal
        var modal = document.getElementById('myModal');

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[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>




Aucun commentaire:

Enregistrer un commentaire