1

necesito para un ejercicio de clase hacer varios ejemplos de:

popup modales tooltips popover

Tengo todo menos el popup, que no me sale y llevo ya dos días. Tiene que ser un popup que anuncie algo nada más entrar en la web, osea se carga en el head pero no soy capaz. Tengo esto hasta ahora:

<!doctype html>

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="css/bootstrap.css">

<title>Ventanas modales</title>

  <script>var cerrar = document.getElementsByClassName("btn-close")[0]</script>

  <div class="container py-5 bg-primary">

      <h1 class="text-center pb-5">VENTANAS MODALES TAREA 2</h1>

      <div class="row">

          <div class="col-6 bg-primary text-center">

              <!-- Button trigger modal -->

              <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal" data-toggle="tooltip" data-placement="top" title="Pulsa para ver como funciona una ventana modal">
                  Abrir ventana modal
              </button>

              <!-- Modal -->

              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Error: introduce un email válido</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                              </button>
                          </div>

                          <div class="modal-footer">
                              <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                          </div>
                      </div>
                  </div>
              </div>
          </div>



          <div class="col-6 bg-primary text-center">

              <!-- Button trigger modal -->

              <button type="button" class="btn btn-success" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Hola, soy un popover :)">
                  Comprobar popover
              </button>

              <!-- Modal -->

              <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Error: introduce un email válido</h5>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                              </button>
                          </div>

                          <div class="modal-footer">
                              <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                          </div>
                      </div>
                  </div>
              </div>
          </div>


          <div class="modal fade" id="mostrarmodal" 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>
                          <h3>Cabecera de la ventana</h3>
                      </div>
                      <div class="modal-body">
                          <h4>Texto de la ventana</h4>
                          Mas texto en la ventana.
                      </div>
                      <div class="modal-footer">
                          <a href="#" data-dismiss="modal" class="btn btn-danger">Cerrar</a>
                      </div>
                  </div>
              </div>
          </div>



      </div>
  </div>





  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="js/bootstrap.min.js"></script>
  <script>

      $(function () {
          $('[data-toggle="popover"]').popover()
      })

  </script>

¿Alguna idea?

2
  • 1
    Hay un ejemplo en está página, getbootstrap.com/docs/4.0/components/modal Commented el 16 ene. 2019 a las 0:27
  • Te agradezco la ayuda, pero no logro verlo. Acabo de empezar con javascript hace una semana y no entiendo casi nada. De esa web saqué los modales, me funciona todo menos el maldito popup que quiero que salga al entrar en la web.
    – MeN
    Commented el 16 ene. 2019 a las 1:03

1 respuesta 1

0

Yo hago algo similar, pero con algo que se denomina "Modal", considero que debe de ser lo mismo, el código en HTML es algo como:

<div id="modalRCT" class="modal">
    <div class="modal-content">
        <h3>Hola <?php echo $_SESSION['rol']."(a)"." ".$_SESSION['nombres'] ?>!</h3><br>
        <p style="font-size:17px;">Recuerda que antes de registrar un nuevo contrato, deben existir <mark>Proveedores</mark> con sus respectivos encargados registrados en el sistema.
        Dale clic en el botón "Agregar", si deseas agregar un nuevo proveedor en este instante.
        De lo contrario, dale clic en "Cerrar" para continuar.</p>
    </div>
    <div class="modal-footer">
        <a href="proveedor/registrarProveedor" class="modal-action modal-close waves-effect waves-blue btn blue">Agregar</a>
        <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">Cerrar</a>
    </div>
</div>

Y para que me salga apenas cargue la página, utilizo Javascript con el siguiente código:

$(document).ready(function(){
  $("#modalRCT").openModal();
})

Aunque utilizo la librería de jQuery para hacer dicho código en Javascript, es fácil de usarla.. es sino descargarla, y al copiar en un archivo Javascript el $(document).ready(function(){ //bla bla bla.. }) ya empleas jQuery

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.