1

Estoy en la creación de una ventana modal pero esta ventana tiene algo muy particular y es que solo deseo que se muestre al momento de iniciar sesión, es decir, después de que el usuario ingrese sus credenciales.

En estos momento estoy presentando un error y es que la ventana se esta mostrando en todas las vistas incluyendo la del login.php y la del index.php que es donde solo planeo mostrarla. Recalco nuevamente solo me interesa mostrarla en la ventana de index.php comparto a continuación el código que tengo para mostrar mi ventana modal.

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="activos/css/estilos.css" type="text/css">
    <link rel="icon" type="image/png" href="activos/img/icon.png" />

    <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" style="font-family:Lettera Text Std; font-size: 12px; display: block;">
      <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">Titulo de prueba</h4>
          </div>
          <div class="modal-body">
            <h3>Prueba</h3>
            <h3>Texto de prueba</h3>
            </br>
          </div>
          <div class="modal-footer">
            <button type="button" class="EnviarContactoDetalleProducto btn-lg" data-dismiss="modal">Aceptar</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>

El anterior es el código que estoy utilizando para mostrar mi ventana modal en index.php pero esta ventana se muestran en las demás vistas que tengo.

Como ven la ventana modal se muestra sin problema el problema es que se esta mostrando en todas las vistas, espero que alguien pueda darme un poco de orientación a solucionar este problema.

Actualización 1:

He agregado la condicional para indicar si se debe mostrar o no, pero aun no consigo el resultado de que se muestre en solo la vista Index.php, se sigue mostrando en todas las demás vistas. Alguna otra solución ?

Agrego todo el código de mi pagina Index.php

Index.php

<?php
  // Agregar las clases
  include ("modelos.php");
  include ("controladores.php");
  include ("vistas.php");
  // Iniciar sesión
  $controlador = Controlador::getInstance();
  $controlador->startSessions();
  $data = $controlador->index();
  
  if (isset($_SESSION["acceso"]) && (time() - $_SESSION["acceso"]) > 3600) {
    $controlador->destroySessions();
    $data = $controlador->index();
  }

  //Se crea variable antes de incluir la vista
  $showModal = true;
?>
<!doctype html>
<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>

    <!--Analizamos la variable para mostrar o no-->
    <?php
      if(isset($showModal) && $showModal) {
    ?>  
   <script>
    document.addEventListener("DOMContentLoaded", function () {
        $('#basicModal').modal({ show: false, 
                                 backdrop: 'static', 
                                 keyboard: false});
        $('#basicModal').modal('show');
      });
</script>
<?php
      }
?>
   
</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">Modal</h4>
          </div>
          <div class="modal-body">
            <h3>Modal de prueba</h3>
          </div>
          <div class="modal-footer">
            <button type="button" class="EnviarContactoDetalleProducto btn-lg" data-dismiss="modal">Aceptar</button>
          </div>
        </div>
      </div>
    </div>
    <div class="cuerpo">   
    <?php
      // Si hay usuario mostrar menú
      if ( $controlador->mostrarMenu()) {
        include $controlador->mostrarMenu();
      }
    ?>                  
     
    <div id="content-area">
    <?php      
      include $data['content'];
      $controlador->mostrarMensaje();
      $controlador->borrarMensaje();  
    ?>
    </div>   
  </div>   
  </body>
  <?php //Se carga el archivo de Javascript
      include ("javascripts.php");
  ?>
 
</html>

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

Actualización 2:

He agregado todo el código de mi controlador para identificar el contenido que voy a mostrar.

Controlador.php

<?php
class Controlador
{
    // Contenedor Instancia de la clase
    private static $instance = NULL;

    // Constructor privado, previene la creación de objetos vía new
    private function __construct(){
        //session_start();
    }

    // Clone no permitido
    public function __clone() { }

    // Método singleton 
    public static function getInstance()
    {
        if (is_null(self::$instance)) {
            self::$instance = new self;
        }

        return self::$instance;
    }    

    public function index()
    {                
        if (isset($_SESSION['username'])){
            $data['content'] = 'vista/home.php';
            $data['title'] = 'Facturas';            
            return $data;
        }
        else{
            $loginController = new LoginControlador(new LoginModelo());            
            $data['content'] = $loginController->mostrarVista();
            $data['title'] = 'Inicio';
            return $data;
        }
    }
    public function startSessions(){
        session_start();        
    }
    public function destroySessions(){     
        session_start();   
        // Borrar todos los valores de sesión
        session_unset();

        session_unregister('username');

        unset($_SESSION);
        unset($_COOKIE);

        // Terminar la sesión
        session_destroy();
    }

    public function mostrarMenu(){
        if (isset($_SESSION['username'])){
            return 'vista/menu.php';        
        }
    }

    public function mostrarMensaje(){
        if (isset($_SESSION['mensaje'])){
            echo '<script language="javascript">alert("'.$_SESSION['mensaje'].'");</script>';
        }
    }

    public function borrarMensaje(){
        unset($_SESSION['mensaje']);
    }    
}

Actualización 3:

Agrego login.php que ya estoy presentando problemas con esta pagina y no em permite ejecutar ninguna acción sobre ella misma.

<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">Usuario:</label>
            <input id="username" type="text" name="username" class="form-control" placeholder="Usuario" required/> 
        </div>
        <div class="form-group">
            <label for="password">Contraseña:</label>
            <input id="password" type="password" name="password" class="form-control" placeholder="Contraseña" required/>        
        </div>
        <a id="recuperar_password">Olvidé mi contraseña</a><br>
        <div class="centrar">
            <button class="EnviarContactoDetalleProducto btn-lg" id="login">Ingresar</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/>
4
  • Se muestra en todas las vistas porque así lo tienes configurado. Coloca el script dentro de un condicional de PHP donde verifiques si se debe mostrar o no.
    – Triby
    Commented el 13 ago. 2021 a las 15:09
  • @Triby Algún ejemplo que me puedas aportar sobre como colocar el script dentro de un condicional en PHP ?
    – John Doe
    Commented el 13 ago. 2021 a las 15:40
  • <?php if(/* aquí tu condición */) { ?><script>/* Aquí el código de tu script */</script><?php } ?>
    – Triby
    Commented el 13 ago. 2021 a las 16:03
  • @Triby Cual seria la condición en mi caso, ya que solo requiero que se ejecute la ventana modal en la vista index.php
    – John Doe
    Commented el 13 ago. 2021 a las 16:14

1 respuesta 1

1

Ya que todo pasa por el controlador, ahí es donde debes identificar si quieres mostrar o no la ventana, creando una variable en el arreglo que devuelves:

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;
    }
}

Luego, en la vista analizas la variable:

<html>
<!-- más código -->
<?php
// Analizas la variable para mostrar ventana
if($data['modal']) {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
    $('#basicModal').modal({ show: false, 
                             backdrop: 'static', 
                             keyboard: false});
    $('#basicModal').modal('show');
});
</script>
<?php
} // Fin del if para ventana modal
?>
<!-- más código -->
7
  • He agregado la condición que me indicas pero aun no consigo el resultado esperado, he agregado todo el código de mi pagina index.php, puedes revisarlo en mi ultima actualización.
    – John Doe
    Commented el 19 ago. 2021 a las 14:50
  • @JohnDoe, ¿todo pasa por index.php? ¿De qué forma identificas el contenido a mostrar?
    – Triby
    Commented el 19 ago. 2021 a las 14:55
  • Al parecer todo pasa por index.php y la forma de como identificado lo realizo por medio de controlador.php, he agregado dicho código.
    – John Doe
    Commented el 19 ago. 2021 a las 15:08
  • @JohnDoe, listo, es en el controlador donde debes crear la variable y después analizas en la vista.
    – Triby
    Commented el 19 ago. 2021 a las 15:35
  • Hay algo curioso que esta sucediendo y que es ahora no quiero ejecutar ninguna acción sobre la vista de login.php , cuando digo ninguna acción me refiero a que no permite seleccionar los campos de textos para ingresar usuario y contraseñas. He agregado el código para su respectiva revisión.
    – John Doe
    Commented el 19 ago. 2021 a las 16:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.