javascript - modals - Modales de arranque: cómo abrir con onClick=“”

modal jquery

Question

Necesito poder abrir una ventana modal de inicio de Twitter usando la función onClick="" o similar. Solo necesita el código para ingresar a onClick="" . Estoy tratando de hacer un div para hacer clic para abrir el modal.

Extractos de código:

Código Div:

<div class="span4 proj-div" onClick="open(''GSCCModal'');">

Código Div Modal:

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

Javascript:

function open(x){
    $(x).modal(''show'');
}

Answer 1

Estaba buscando la opción onClick para establecer el título y el cuerpo del modal según el elemento en una lista. La respuesta de T145 me ayudó mucho, así que quería compartir cómo la usé.

Asegúrese de que la etiqueta que contiene la función de JavaScript sea de tipo texto / javascript para evitar conflictos:

<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {

   /*
    * ''#myModayTitle'' and ''#myModalBody'' refer to the ''id'' of the HTML tags in
    * the modal HTML code that hold the title and body respectively. These id''s
    * can be named anything, just make sure they are added as necessary.
    *
    */

   $(''#myModalTitle'').html(myTitle);
   $(''#myModalBody'').html(myBodyHtml);

   $(''#myModal'').modal(''show'');
}</script>

Ahora se puede llamar a esta función en el método onClick desde un elemento como un botón:

<button type="button" onClick="javascript:showMyModalSetTitle(''Some Title'', ''Some body txt'')"> Click Me! </button>

Answer 2

No necesitas un clic. Suponiendo que esté utilizando la documentación de Bootstrap 3 Bootstrap 3

<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>

<div id="GSCCModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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 title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Si está utilizando Bootstrap 2, debería seguir el marcado aquí: http://getbootstrap.com/2.3.2/javascript.html#modals

Answer 3

Primero debe crearse una función de JavaScript que contenga lo que desea hacer:

function print() { console.log("Hello World!") }

y luego esa función debe ser llamada en el método onClick desde dentro de un elemento:

<a onClick="print()"> ... </a>

Puede obtener más información sobre las interacciones modales directamente en la documentación de Bootstrap 3 que se encuentra aquí: http://getbootstrap.com/javascript/#modals

Su enlace modal también es incorrecto. Debería ser algo como esto, donde "myModal" = ID del elemento:

$(''#myModal'').modal(options)

En otras palabras, si realmente desea mantener lo que ya tiene, ponga un "#" en frente de GSCCModal y vea si eso funciona.

Tampoco es muy sabio tener un onClick enlazado a un elemento div; algo como un botón sería más adecuado.

¡Espero que esto ayude!

Answer 4

Tuve el mismo problema, después de investigar mucho, finalmente construí una función js para crear modales dinámicamente según mis requisitos. Usando esta función, puedes crear ventanas emergentes en una línea como:

puyModal({title:''Test Title'',heading:''Heading'',message:''This is sample message.''})

O puede usar otra funcionalidad compleja como iframes, ventanas emergentes de video, etc.

Encuéntrelo en https://github.com/aybhalala/puymodals Para ver una demostración, vaya a http://pateladitya.com/puymodals/