w3 schools modal tutorial not working

Question

Hi im following the tutorial on w3 schools on modals http://www.w3schools.com/howto/howto_css_modals.asp but i cant seem to get mine to open at all. is there anything in my code that is going wrong or am i missing something.

or is there any different ways that you would recommend i do this?

    <?php
    session_start();
    include 'loginlogoutregister.php';
    //connecting to database
    $link = mysqli_connect("localhost","root","","authentication");

    if(isset($_POST['Login_Btn'])){
        login($link);
    }
    if(isset($_POST['Register_Btn'])){
        register($link);
    }
    if(isset($_POST['Logout_Btn'])){
        logout($link);
    }
?>
<html>
<head>
    <Title>LogIn</Title>
    <link rel="stylesheet" type="text/css"  href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        var modal = document.getElementById('PopUpLR');
        var btn = document.getElementById("myBtn");
        var span = document.getElementsByClassName("closeLR")[0];
        btn.onclick = function() {
            modal.style.display = "block";
        }
        span.onclick = function() {
            modal.style.display = "none";
        }
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</head>
<body>
<div class = "headerContainer">
    <div class = "headerLeft">
        test
    </div>
    <div class="headerMiddle"> 
        <h1>Website</h1>
        <div><h4>
        <?php 
            if(isset($_SESSION['username']) ){
                echo "Welcome ".$_SESSION['username'];

            }else{
                echo "Logged Out ";
            }
        ?>
        </h4></div>
    </div>
    <div class = "headerRight">
        <div class = "loginRegister">
            <p>Login/Register</p>
        </div>
    </div>
</div>
<button id="myBtn">Open Modal</button>
<div id = "PopUpLR">
    <div class = "PopUpLRContent">
        <span class="closeLR">x</span>
        <p>Some text in the Modal..</p>
    </div>
</div>
</body>
</html>



 #PopUpLR{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.PopUpLRContent{
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}
.closeLR {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.closeLR:hover,
.closeLR:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

oh thanks that solved my problem. moving the script to the bottom — GregHBushnell, Sep 05 '16 at 18:32

score 0 · Accepted Answer · answered Sep 05 '16 at 18:32

0

moving the script to the bottom of the body tag solved this issue

answered Sep 05 '16 at 18:32

GregHBushnell

143
12

score 0 · Answer 2 · answered Sep 05 '16 at 18:43

Move your script <script> var modal = document.getElementById('PopUpLR'); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("closeLR")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script>

under your HTML so the button knows what its sending to!

w3 schools modal tutorial not working

2 Answers2