javascript - example - modal bootstrap ejemplos

Twitter Bootstrap/jQuery: ¿cómo evitar temporalmente que se cierre el modal?

Question

Estoy utilizando Twitter modales Bootstrap, con las opciones predeterminadas donde puede hacer clic en el fondo o presionar [Esc] para cerrar el modal.

Sin embargo, cuando inicio una operación de ajax en el modo modal, deseo desactivar el modal para que no se cierre de ninguna manera. Así que deshabilito los botones y escondo el botón de cerrar del modal, pero no puedo descifrar cómo desactivar el fondo y la tecla [Esc].

Lo intenté:

$(''#myModal'').modal({
    backdrop: ''static'',
    keyboard: false
});

Pero esto no parece funcionar sobre la marcha.

También necesitaré volver a habilitar el fondo y el teclado una vez que la operación ajax haya finalizado.

Answer 1

Gracias @davidkonrad por tu trabajo en esto. Intenté implementar esto también y parece que las cosas han cambiado con bootstrap 3. Ahora, en lugar de:

_superModal.defaults

ahora está unido al constructor por lo que tienes que hacer

_superModal.Constructor.DEFAULTS

También el constructor ha cambiado, lo que significaba que tenía que copiarlo y modificarlo, lo que es menos que ideal. En cambio, he encontrado el siguiente código que funciona y no copia el constructor y debería ser más infalible si los cambios de rutina van en el futuro. Intentar:

// save the original function object
var _superModal = $.fn.modal;

// add locked as a new option
$.extend( _superModal.Constructor.DEFAULTS, {
    locked: false
});

// capture the original hide
var _hide = _superModal.Constructor.prototype.hide;
// console.log(''HIDE:'', _hide);

// add the lock, unlock and override the hide of modal
$.extend(_superModal.Constructor.prototype, {
    // locks the dialog so that it cannot be hidden
    lock: function() {
        // console.log(''lock called'');
        // console.log(''OPTIONS'',this.options);
        this.options.locked = true;
    }
    // unlocks the dialog so that it can be hidden by ''esc'' or clicking on the backdrop (if not static)
    ,unlock: function() {
        // console.log(''unlock called'');
        this.options.locked = false;
    }
    // override the original hide so that the original is only called if the modal is unlocked
    ,hide: function() {
        // console.log(''hide called'');
        if (this.options.locked) return;

        _hide.apply(this, arguments);
    }
});

Entonces, para bloquear el modal:

$(''#dlg'').modal(''lock'');

y para desbloquear:

$(''#dlg'').modal(''unlock'');

¡Hurra!

Answer 2

Hay una manera más fácil de hacerlo. This solicitud de extracción de bootstrap explica un poco más. La solución desactiva todos los métodos para cerrar el modal (teclado, clic del mouse, botón de cerrar).

Todo lo que tiene que hacer para desactivar el cierre del modal es:

$(''#myModal'').data(''bs.modal'').isShown = false;

Para habilitar el cierre nuevamente:

$(''#myModal'').data(''bs.modal'').isShown = true;

Ejemplo

Aquí hay un código de muestra que funciona junto con un jQuery get:

// disable closing the modal
$(''#myModal'').data(''bs.modal'').isShown = false;

// Send an HTTP GET request to the server - replace this with getJSON, post or ajax as needed
$.get( "ajax/test.html", function( data ) {
  // enable closing the modal
  $(''#myModal'').data(''bs.modal'').isShown = true;

  // Do something with the data
  $( ".result" ).html( data );
});

Answer 3

No eres el único que falta esa característica. Creo que bootstrap a veces es demasiado "minimalista", la gente detrás tiene la idea de que se debe hacer mucho en la "capa de implementación", pero no sirve de nada cuando los plugins jQuery bootstrap lo hacen imposible.

Tienes que implementar la funcionalidad tú mismo, así :

en bootstrap.js v2.1.1 modal comienza en la línea 61.

en Modal.prototype , agregue dos funciones, lock y unlock , por lo que se ve así (muestro aquí solo el comienzo de modal.prototype , porque es demasiado código)

  Modal.prototype = {

      constructor: Modal

      //add this function
    , lock: function () {
        this.options.locked = true
      }

      //add this function
    , unlock: function () {
        this.options.locked = false
      }

    , toggle: function () {
    ... 
    ...

Luego, también en Modal.prototype, encuentre la función hide y agregue una línea para que se vea así (nuevamente, solo se muestra la parte superior de la máscara)

, hide: function (e) {
    e && e.preventDefault()

    var that = this

    //add this line
    if (that.options.locked) return

    e = $.Event(''hide'')
    ...
    ...

Y finalmente, modifique $.fn.modal.defaults a:

  $.fn.modal.defaults = {
      backdrop: true
    , keyboard: true
    , show: true
    , locked: false //this line is added
  }

Ahora tiene la funcionalidad de bloqueo / desbloqueo sobre la marcha en su modalidad de arranque, lo que evita que el usuario cierre el modal en momentos críticos.

Ejemplo :

Esta es una versión modificada de "Live Demo" de http://twitter.github.com/bootstrap/javascript.html#modals

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" onclick="$(''#myModal'').modal(''lock'');">lock</button>
    <button class="btn btn-primary" onclick="$(''#myModal'').modal(''unlock'');">unLock</button>
  </div>
</div>
<script type="text/javascript">

He insertado dos botones, "bloquear" y "desbloquear": al hacer clic, configuran el modal en modo bloqueado o normal (la configuración con la que se inicializa)

Editar , en tu caso, solo tienes que llamar a lock / onlock cuando haces ajax:

$("myModal").modal(''lock'');
$.ajax({
    url: url,
    ...
    ...
    , success(html) {
       ...
       ...
       $("#myModal").modal(''unlock'');
    }
});

Answer 4

Puede crear una variable isBlocked que puede establecer mientras realiza llamadas AJAX a true, luego puede verificarlo en bootrap modal hide event de esta manera:

$(''#myModal'').on(''hide.bs.modal'', function (e) {
      //Prevent modal from closing is isBlocked is true
      if(isBlocked) return e.preventDefault();
})

Creo que de esta manera es más fácil que extender Bootsrap, espero que ayude a alguien: D

Answer 5

Nota : ¡Esta solución apunta a Twitter bootstrap 2.x ! Vea esta respuesta (justo debajo) para las diferencias según bootstrap 3.

Ampliando la funcionalidad modal de arranque sin modificar la fuente original.

Gracias a @David y su sugerencia sobre cómo extender el complemento de Twitter Bootstrap , finalmente lo hice funcionar. Es una versión ligeramente modificada de su solución con un "bloqueo" modal. Lo publico como una respuesta adicional, ya que creo que podría ser un punto de partida para otros que como yo hemos luchado mucho con este tema.

// save the original function object
var _superModal = $.fn.modal;

// add locked as a new option
$.extend( _superModal.defaults, {
    locked: false
});

// create a new constructor
var Modal = function(element, options) {
    _superModal.Constructor.apply( this, arguments )
}

// extend prototype and add a super function
Modal.prototype = $.extend({}, _superModal.Constructor.prototype, {
    constructor: Modal

    , _super: function() {
        var args = $.makeArray(arguments)
        // call bootstrap core
        _superModal.Constructor.prototype[args.shift()].apply(this, args)
    }

    , lock : function() {
        this.options.locked = true
    }

    , unlock : function() {
        this.options.locked = false
    }

    , hide: function() {
        if (this.options.locked) return
        this._super(''hide'')
    }
});

// override the old initialization with the new constructor
$.fn.modal = $.extend(function(option) {
    var args = $.makeArray(arguments),
    option = args.shift()

    // this is executed everytime element.modal() is called
    return this.each(function() {
        var $this = $(this)
        var data = $this.data(''modal''),
            options = $.extend({}, _superModal.defaults, $this.data(), typeof option == ''object'' && option)

        if (!data) {
            $this.data(''modal'', (data = new Modal(this, options)))
        }
        if (typeof option == ''string'') {
            data[option].apply( data, args )
        }
    });
}, $.fn.modal);

Con esta técnica no debería ser necesario alterar bootstrap.js, y la misma funcionalidad se puede compartir más fácilmente entre los proyectos bootstrap. Este método debería ser aplicable a todos los otros complementos de arranque. Hasta ahora, solo he intentado con el botón, pero no puedo ver por qué no debería.

ver violín de trabajo -> http://jsfiddle.net/Sz7ZS/