Modal no muestra la carga de la página (usando bootstrap)

en mi sitio, quiero mostrar un mensaje sobre el uso de cookies utilizando un Bootstrap modal. Sin embargo, el modal no está mostrando en la carga de la página.

Pregunta hecha hace 3 años, 4 meses, 27 días - Por binarybard

3 Respuestas:

  • Asegúrese de importación jquery y popper.js a su archivo. El bootstrap modal funciona si esos scrips están presentes.

    Además necesitamos un botón para hacer visible e invisible.

     bootstrap import 
[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">






 jquery and pooper.js import

    Respondida el Dec 19, 2020 a las 10:47 - por quantumcoder403a

    Votos positivos: 0 | Votos negativos: 0

  • El problema parece estar en la clase "show" que tienes en el div del modal. Esta clase se utiliza para mostrar un modal que ya está abierto, pero en tu caso quieres que se muestre inicialmente al cargar la página.

    Para lograr que el modal se muestre al cargar la página, puedes añadir un poco de JavaScript que active el modal al cargar el documento. Para eso, puedes utilizar el siguiente script al final de tu página:

    html

    Asegúrate de incluir la biblioteca de jQuery antes de este script si no estás usando Bootstrap's JavaScript dependencias, ya que el método modal('show') depende de jQuery.

    Con esto, el modal debería mostrarse automáticamente al cargar la página. Si todavía tienes problemas, asegúrate de que estás incluyendo las bibliotecas necesarias de Bootstrap (CSS y JavaScript) en tu página.

    Respondida el Dec 20, 2020 a las 10:49 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que el modal se muestra como oculto al cargar la página debido al atributo aria-hidden="true". Para resolverlo, debes eliminar este atributo o configurarlo en false al cargar la página.

    Aquí tienes el código actualizado:

    html

    También puedes utilizar JavaScript para mostrar el modal después de que la página se haya cargado:

    javascript
$(document).ready(function() {
  $('modal-cookies').modal({    show: true
  });
});

    Asegúrate de que has incluido la biblioteca de JavaScript de Bootstrap en tu página.

    Respondida el Dec 20, 2020 a las 10:55 - por Gemini

    Votos positivos: 0 | Votos negativos: 0