Why my modal window is replicated in all views

I am in the creation of a modal window but this window has something very particular and it is that I only want it to be displayed at the moment of logging in, that is, after the user enters their credentials.

At the moment I am presenting an error and it is that the window is being shown in all the views including the del login.php and the del index.php which is where I only plan to show it. I emphasize again I am only interested in showing it in the window index.phpI share below the code I have to show my modal window.

Index.php

<html lang="es">
  <head>
    <title><?php echo ($data['title']); ?></title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    
    <script>
document.addEventListener("DOMContentLoaded", function () {
    $('#basicModal').modal({ show: false, 
                             backdrop: 'static', 
                             keyboard: false});
    $('#basicModal').modal('show');
  });
</script>

</head>
  <body>
   <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" 
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Title test
          </div>
          <div class="modal-body">
            <h3>Test</h3>
            <h3>Text test</h3>
            </br>
          </div>
          <div class="modal-footer">
            <button type="button" class="EnviarContactoDetalleProducto btn-lg" data-dismiss="modal">Accept</button>
          </div>
        </div>
      </div>
    </div>
    <div class="cuerpo">   
 
    <div id="content-area">
    </div>  
  </div>
  </body>  
</html>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

JavaScript
​x
 
<html lang="es">  <head>    <title><?php echo ($data['title']); ?></title>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">    <!-- Optional theme -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>​        <script>document.addEventListener("DOMContentLoaded", function () {    $('#basicModal').modal({ show: false,                              backdrop: 'static',                              keyboard: false});    $('#basicModal').modal('show');  });</script>​</head>  <body>   <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"       <div class="modal-dialog">        <div class="modal-content">          <div class="modal-header">            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            <h4 class="modal-title" id="myModalLabel">Title test          </div>          <div class="modal-body">            <h3>Test</h3>            <h3>Text test</h3>            </br>          </div>          <div class="modal-footer">            <button type="button" class="EnviarContactoDetalleProducto btn-lg" data-dismiss="modal">Accept</button>          </div>        </div>      </div>    </div>    <div class="cuerpo">        <div id="content-area">    </div>    </div>  </body>  </html>​<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

The above is the code that I am using to display my modal window in index.php but this window does show up in the other views I have.

As you can see, the modal window is shown without problem, the problem is that it is being shown in all views, I hope someone can give me some guidance to solve this problem.

UPDATE 1:

This is what login.php looks like

<div id="cuerpo_pequeno">
<div class="espacio-medio"></div>
<div class="espacio-pequeno"></div>
<div class="">
    <form method="post">
        <div class="form-group">
            <label for="username">User:</label>
            <input id="username" type="text" name="username" class="form-control" placeholder="Usuario" required/> 
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input id="password" type="password" name="password" class="form-control" placeholder="Contraseña" required/>        
        </div>
        <a id="recuperar_password">Forgot password</a><br>
        <div class="centrar">
            <button class="EnviarContactoDetalleProducto btn-lg" id="login">Enter</button>  
        </div>
        <br/>
    </form>
    <br>
    <div id="mensaje"></div>
</div>
<?php
    $loginView = new LoginVista();
    if(isset($_POST['username']) && $_POST['username'] != '' && isset($_POST['password']) && $_POST['password'] != ''){
        $username = $_POST['username'];
        $password = $_POST['password'];
        $result = $loginView->validarCredenciales($username, $password);
    }
?>
</div>
<br/>
<br/>

JavaScript
 
<div id="cuerpo_pequeno"><div class="espacio-medio"></div><div class="espacio-pequeno"></div><div class="">    <form method="post">        <div class="form-group">            <label for="username">User:</label>            <input id="username" type="text" name="username" class="form-control" placeholder="Usuario" required/>         </div>        <div class="form-group">            <label for="password">Password:</label>            <input id="password" type="password" name="password" class="form-control" placeholder="Contraseña" required/>                </div>        <a id="recuperar_password">Forgot password</a><br>        <div class="centrar">            <button class="EnviarContactoDetalleProducto btn-lg" id="login">Enter</button>          </div>        <br/>    </form>    <br>    <div id="mensaje"></div></div><?php    $loginView = new LoginVista();    if(isset($_POST['username']) && $_POST['username'] != '' && isset($_POST['password']) && $_POST['password'] != ''){        $username = $_POST['username'];        $password = $_POST['password'];        $result = $loginView->validarCredenciales($username, $password);    }?></div><br/><br/>​

Modelos.php

<?php
    include ("modelo/LoginModelo.php");
    include ("modelo/FacturasModelo.php");  
?>

JavaScript
 
<?php    include ("modelo/LoginModelo.php");    include ("modelo/FacturasModelo.php");  ?>​

Controladores.php

<?php
    include ('controlador/Controlador.php');        
    include ('controlador/LoginControlador.php');   
    include ('controlador/FacturasControlador.php');    
?>

JavaScript
 
<?php    include ('controlador/Controlador.php');            include ('controlador/LoginControlador.php');       include ('controlador/FacturasControlador.php');    ?>​

Vistas.php

<?php
    include ('vista/LoginVista.php');       
    include ('vista/FacturasVista.php');        
?>

JavaScript
 
<?php    include ('vista/LoginVista.php');           include ('vista/FacturasVista.php');        ?>​

Answer

After going back and forth I realized that everything goes through the controller, that’s where I have to identify if I want to show the window or not, creating a variable in the array that I return.

public function index()
{                
    if (isset($_SESSION['username'])){
        $data['content'] = 'vista/home.php';
        $data['title'] = 'Facturas';
        // Mostrar en índice
        $data['modal'] = true;
        return $data;
    }
    else{
        $loginController = new LoginControlador(new LoginModelo());            
        $data['content'] = $loginController->mostrarVista();
        $data['title'] = 'Inicio';
        // No mostrar en login
        $data['modal'] = false;
        return $data;
    }
}

JavaScript
 
public function index(){                    if (isset($_SESSION['username'])){        $data['content'] = 'vista/home.php';        $data['title'] = 'Facturas';        // Mostrar en índice        $data['modal'] = true;        return $data;    }    else{        $loginController = new LoginControlador(new LoginModelo());                    $data['content'] = $loginController->mostrarVista();        $data['title'] = 'Inicio';        // No mostrar en login        $data['modal'] = false;        return $data;    }}​

Then in the view analyze the variable

<html>
<!-- more code -->
<?php
// I analyze the variable to show window
if($data['modal']) {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
    $('#basicModal').modal({ show: false, 
                             backdrop: 'static', 
                             keyboard: false});
    $('#basicModal').modal('show');
});
</script>
<?php
} // End of if for modal window
?>
<!-- more code -->

JavaScript
 
<html><!-- more code --><?php// I analyze the variable to show windowif($data['modal']) {?><script>document.addEventListener("DOMContentLoaded", function () {    $('#basicModal').modal({ show: false,                              backdrop: 'static',                              keyboard: false});    $('#basicModal').modal('show');});</script><?php} // End of if for modal window?><!-- more code -->​

Advertisement

Answer