javascript - form - class page bootstrap

Inicie Bootstrap Modal en la carga de la página (14)

No sé javascript en absoluto. La documentación de arranque dice a

Llame al modal a través de javascript: $ (''# myModal''). Modal (opciones)

No tengo ni idea de cómo llamar esto a una carga de página. Usando el código provisto en la página de arranque, puedo llamar exitosamente al Modal en un clic de elemento, pero quiero que se cargue inmediatamente en una carga de página.

Aquí hay una solución [sin inicialización de JavaScript!]

No pude encontrar un ejemplo sin inicializar su modal con javascript, $(''#myModal'').modal(''show'') , por lo que hay una sugerencia sobre cómo podría implementarlo sin demora de javascript en la carga de la página.

Edite su contenedor modal div con clase y estilo:

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

Edita tu cuerpo con clase y estilo:
<body class="modal-open" style="padding-right:17px;">
Agregar modal-backdrop div
<div class="modal-backdrop in"></div>
Añadir script
$(document).ready(function() { $(''body'').css(''padding-right'', ''0px''); $(''body'').removeClass(''modal-open''); $(''.modal-backdrop'').remove(); $(''#MyModal'').modal(''show''); });
Lo que sucederá es que el html para su modal se cargará en la carga de la página sin ningún javascript, (sin demora). En este momento no puede cerrar el modal, por eso tenemos el script document.ready, para cargar el modal correctamente cuando todo está cargado. En realidad eliminaremos el código personalizado y luego inicializaremos el modal, (nuevamente), con .modal (''show'').

Además de user2545728 y respuestas Reft, sin javascript pero con el modal-backdrop in

3 cosas para agregar

un div con las clases modal-backdrop in antes de la clase .modal
style="display:block;" a la clase .modal
fade in junto con la clase .modal

Ejemplo

<div class="modal-backdrop in"></div> <div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="channelModal">Welcome!</h4> </div> <div class="modal-body" style="height:350px;"> How did you find us? </div> </div> </div> </div>

Como otros han mencionado, crea tu modal con display: block

<div class="modal in" tabindex="-1" role="dialog" style="display:block"> ...

Coloque el fondo en cualquier lugar de su página, no necesariamente debe estar en la parte inferior de la página

<div class="modal-backdrop fade show"></div>

Luego, para poder cerrar el diálogo nuevamente, agregue esto

<script> $("button[data-dismiss=modal]").click(function () { $(".modal.in").removeClass("in").addClass("fade").hide(); $(".modal-backdrop").remove(); }); </script>

Espero que esto ayude

En bootstrap 3 solo necesita inicializar el modal a través de js y si en el momento de cargar la página el marcado modal está en la página aparecerá el modal.

En caso de que quiera evitar esto, use la opción show: false donde inicializa el modal. Algo como esto: $(''.modal'').modal({ show: false })

En mi caso, agregar jQuery para mostrar el modal no funcionó:

$(document).ready(function() { $(''#myModal'').modal(''show''); });

Lo que parecía ser porque el modal tenía el atributo aria-hidden = "true":

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Se necesitaba quitar ese atributo, así como el jQuery anterior:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Tenga en cuenta que traté de cambiar las clases modales de modal fade a modal fade in , y eso no funcionó. Además, el cambio de las clases de modal fade modal show impidió que se pudiera cerrar el modal.

Es posible que desee mantener jquery.js diferido para una carga de página más rápida. Sin embargo, si jquery.js se aplaza, $(window).load puede no funcionar. Entonces puedes intentar

setTimeout(function(){$(''#myModal'').modal(''show'');},3000);

Aparecerá su modal después de que la página esté completamente cargada (incluyendo jquery)

No necesitas javascript para mostrar modal

La forma más simple es reemplazar "ocultar" por "en"

class="modal fade hide"

asi que

class="modal fade in"

y necesita agregar onclick = "$(''.modal'').hide()" en el botón cerrar;

PD: creo que la mejor manera es agregar script jQuery:

$(''.modal'').modal(''show'');

Puede activar el modal sin escribir ningún JavaScript simplemente a través de atributos de datos.

La opción "mostrar" establecida en verdadero muestra el modal cuando se inicializa:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

Puedes probar este código ejecutable-

$(window).load(function() { $(''#myModal'').modal(''show''); });

Más se puede encontrar here .

Piensa que tienes tu respuesta completa.

Simplemente agregue lo siguiente-

class="modal show"

Ejemplo de trabajo-

Usé el código en la respuesta aceptada, pero HTML no funcionó para mí.

Ajustó algunas cosas y el siguiente código funciona (utilizando js de respuesta aceptada):

<div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"><i class="fa fa-exclamation-circle"></i>  //Your modal Title</h4> </div> <div class="modal-body"> //Your modal Content </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> </div> </div> </div> </div>

con respecto a lo que Andre Ilich dice que tienes que agregar el script js después de la línea en lo que llamas el jquery:

<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function(){ $(''#myModal'').modal(''show''); }); </script>

en mi caso ese fue el problema espero que ayude

Simplemente envuelva el modal al que desea llamar en la carga de la página dentro de un evento de load jQuery en la sección principal de su documento y debería aparecer, de esta forma:

<script type="text/javascript"> $(window).on(''load'',function(){ $(''#myModal'').modal(''show''); }); </script>

HTML

<div class="modal hide fade" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div>

Todavía puede llamar al modal dentro de su página llamándolo con un enlace como ese:

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-body"> <p><i class="icon-spinner icon-spin icon-4x"></i></p> </div> </div>

Puede mostrarlo al inicio incluso sin Javascript. Simplemente elimine la clase "ocultar".

class="Modal"