Throughout my site there is a sticky header called using php include. In this sticky header I have an if/else statement that checks for an existing session. If there is no session, then the code echos a login button. This all works as intended. I want to upgrade the site to use a login modal instead of a separate page. I've coded the modal in it's own php file that can be included on each page of the site. So far so good. Now, when I echo the data-toggle button the modal appears as soon as the page loads, rather than waiting for the user to trigger the button.
My goal is to hide the modal until the user wants to trigger the login screen by clicking on the button in the sticky header.
I've tested the code all in one page, and this works. I've then separated out the header and the modal into two pages, and this works. Once I incorporate the third page the trigger issue occurs.
/=============== LOGIN MENU =====================/
<div id="top-nav"> <div id="login-top"> <?php // Initialize the session session_start(); // If session variable is set it will show logout button if(isset($_SESSION['username'])){ echo '<a href="../account/account.php"><img src="../images/menu/Button_Account.png" width="140" height="25" /></a>'; } else { echo '<a href="#myModal" class="trigger-btn" data-toggle="modal"><img src="../images/menu/Button_LoginSmall.png" width="140" height="25" /></a>'; } ?> <!-- END #login-top --></div> <!-- END #top-nav --></div> /=============== MODAL =====================/
<div id="myModal" class="modal fade"> <div class="modal-login"> <div class="dimiss"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div> <div class="formStuff"> <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"> <div class="text-field <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>"> <input type="text" name="username"class="form-control" value="<?php echo $username; ?>" placeholder="Username"> <span class="help-block"><?php echo $username_err; ?></span> </div> <br/> <div class="text-field <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>"> <input type="password" name="password" class="form-control" placeholder="Password"> <span class="help-block"><?php echo $password_err; ?></span> </div> <br/> <p align="center"><input name="submit" type="image" value="Login" src="../images/buttons/Button_LoginReg.png" /></p> <p align="center" style="color:#FFFFFF"><strong>Don't have an account? <a href="register.php">Sign up now</a>.</strong></p> </form> </div> </div> </div> <script> $('#myModal').modal({ backdrop: 'static', keyboard: false }) </script> /=============== INDEX =====================/
<!-- BEGIN menu.php INCLUDE --> <?php include "../menus/loginMenu.php"; ?> <!-- END menu.php INCLUDE --> <!-- BEGIN menu.php INCLUDE --> <?php include "../login/modal.php"; ?> <!-- END menu.php INCLUDE --> more code and junk down here, but no other related script is called.
I expected the modal to be hidden until toggled on. Would love any ideas on how to trouble shoot this beyond testing the code separately, which I've already done.
