Martes, 09 Junio 2026

Misa por el 50 aniversario del IESC, Chiclayo
Misa de aniversario en la iglesia de la Compañía, Arequipa
Misa por el 50 aniversario del IESC en la Parroquia de Santa Rita, Miraflores
Asistentes al brindis con motivo del 50 aniversario del IESC
El presidente del IESC saluda al Papa Francisco en el marco de la conferencia internacional ‘Salvar nuestra casa común y el futuro de la vida sobre la tierra’.
P. Juan Roger Rodríguez en la firma de su libro: 'El Estado peruano, ni confesional ni laico'
(Izq. a der.) Armando Borda, Hans Schelkshorn, Andreas Rendl en el Foro Social Cristiano 'Desafíos para Europa: El Populismo'
Presentación del libro: Evangélicos y poder en América Latina. Autor: José Luis Pérez Guadalupe
(Izq. a der.) Armando Borda, Sebastian Grundberger, Peter Weiss en el Foro Social Cristiano: El Desafío Populista en Europa
Firma del convenio de cooperación de la Universidad Católica de Lublin y el IESC. 10 de mayo.
Seminario Internacional: Políticos cristianos frente a los desafíos globales.
FSC: La Iglesia ante la crisis social en Venezuela

Noticias

Revista Testimonio

Modal

Categoría de nivel principal o raíz: Demo
Categoría: Bootstrap
Escrito por Super User
Creado: 09 Noviembre 2012
Visto: 1241

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Static example

A rendered modal with header, body, and set of actions in the footer.

Modal header

One fine body…

Close Save changes
  1. <div class="modal hide fade">
  2.  <div class="modal-header">
  3.  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  4.  <h3>Modal header</h3>
  5.  </div>
  6.  <div class="modal-body">
  7.  <p>One fine body…</p>
  8.  </div>
  9.  <div class="modal-footer">
  10.  <a href="#" class="btn">Close</a>
  11.  <a href="#" class="btn btn-primary">Save changes</a>
  12.  </div>
  13. </div>

Live demo

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Launch demo modal
  1. <-- Button to trigger modal -->
  2. <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
  3.  
  4. <-- Modal -->
  5. <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  6.  <div class="modal-header">
  7.  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  8.  <h3 id="myModalLabel">Modal header</h3>
  9.  </div>
  10.  <div class="modal-body">
  11.  <p>One fine body…</p>
  12.  </div>
  13.  <div class="modal-footer">
  14.  <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  15.  <button class="btn btn-primary">Save changes</button>
  16.  </div>
  17. </div>

Usage

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

  1. <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Nametypedefaultdescription
backdrop boolean true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
show boolean true Shows the modal when initialized.
remote path false

If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body. If you're using the data api, you may alternatively use the href tag to specify the remote source. An example of this is shown below:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Methods

.modal(options)

Activates your content as a modal. Accepts an optional options object.

  1. $('#myModal').modal({
  2. keyboard: false
  3. })

.modal('toggle')

Manually toggles a modal.

  1. $('#myModal').modal('toggle')

.modal('show')

Manually opens a modal.

  1. $('#myModal').modal('show')

.modal('hide')

Manually hides a modal.

  1. $('#myModal').modal('hide')

Events

Bootstrap's modal class exposes a few events for hooking into modal functionality.

EventDescription
show This event fires immediately when the show instance method is called.
shown This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).
hide This event is fired immediately when the hide instance method has been called.
hidden This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).
  1. $('#myModal').on('hidden', function () {
  2.  // do something…
  3. })

Eventos

Últimos Libros