viernes, 20 de abril de 2018

 

como mostrar modal de bootstrap al cargar la pagina web

Hola Amigos .Hoy les dejo algo genial que puede ser de mucha utilidad en sus proyectos web.Mostar una ventana emergente.con bootstrap 4


Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuerypersonalizado. Se puede usar para crear ventanas emergentes  para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.






Aqui .el codigo completo de html y java script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CÓMO MOSTRAR VENTANA EMERGENTE DE FORMA AUTOMÁTICA USANDO MODAL BOOTSTRAP 4 </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>

<!-- Modal -->
<div class="modal fade" id="Modal" 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">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi repellendus, quasi eaque vero omnis praesentium labore autem quam nostrum repellat tempora. Maxime est quis placeat repellendus saepe expedita, animi ratione?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
   
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!--script para javascript para que carga el modal -->
<script>
       
   $(document).ready(function()
   {
      $("#Modal").modal("show");
   });
</script>
</body>
</html>
 
 Eso sería todo espero ayudarles...dudas y sugerencias dejanos tu mensaje en los comentarios

Share: