Estoy tratando de centro de espera de la pantalla de diálogo modal en el centro de la pantalla. Aquí está el cuadro de diálogo modal que yo estoy tratando de alterar: http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap. ¿Cómo puedo centro horizontal y vertical?

OriginalEl autor Anonymous1 | 2013-09-09

5 Comentarios

  1. 16

    Esto es sólo cuestión de aplicar un poco de CSS para el pleaseWaitDialog ID. Usted tiene que fijar position:absolute y la margin-top y margin-left deben ser la mitad de la altura y la anchura. Así que tu CSS debería ser algo como esto:

    #pleaseWaitDialog {
        width: 400px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -200px;
        padding: 20px;
    }

    Usted tendrá que jugar con los números en orden a alcanzar el tamaño de la caja que se adapte a lo que quieras, sino que debe empezar.

    Esto funciona. Para cualquier otra persona con el mismo problema, he quitado la altura y la posición de los atributos y cambiado margin-top-90px.
    Por lo tanto, este no funciona para mí, vine con mi propia solución: ajustes.klickagent.ch/#30.05.2014_TwitterBootstrapCenterModal (sólo en caso de que alguien este no funciona bien)
    Este uno de los más perfecta!

    OriginalEl autor crazymatt

  2. 4

    Aquí es otra sugerencia, que no implica codificar de los márgenes. es el uso de Angulares, pero se puede sustituir el elemento con $. Anima el margen, la simulación de «fade» de la clase en bootstrap.

            var resize = function () {
                var dialog = angular.element('#globalPleaseWaitDialog .modal-dialog');
                dialog.css('margin-top', (angular.element(that.$window).height() - dialog.height()) / 2 - parseInt(dialog.css('padding-top')));
            };
    
            var animate = function () {
    
                var dialog = angular.element('#globalPleaseWaitDialog .modal-dialog');
                dialog.animate({ 'margin-top': (angular.element(that.$window).height() - dialog.height()) / 2 - parseInt(dialog.css('padding-top')) }, 'slow');
                pleaseWaitDiv.off('shown.bs.modal', animate);
    
            };
    
            this.showPleaseWait = function () {
                angular.element($window).on('resize', resize);
                pleaseWaitDiv.on('shown.bs.modal', animate);
                pleaseWaitDiv.modal();
            };
    
            this.hidePleaseWait = function () {
                pleaseWaitDiv.modal('hide');
                angular.element($window).off('resize', resize);
            };

    OriginalEl autor Sergey Barskiy

  3. 3

    Sé que es un poco tarde, pero he encontrado la solución a todos los problemas con el centrado de la Modal de Bootstrap con diferentes alturas de la norma (uno).

    $("#yourModal").modal('show').css({
        'margin-top': function () { //vertical centering
            return -($(this).height() / 2);
        },
        'margin-left': function () { //Horizontal centering
            return -($(this).width() / 2);
        }
    });
    Con los márgenes negativos, hace que la ventana modal para estar fuera de la pantalla. Dejar caer el signo negativo de las causas que se forma a la baja.

    OriginalEl autor alex89x

  4. 2

    Estándar jQuery/Coffeescript he utilizado:

    modal = $('.modal')
    modal.css 'margin-top', ($(window).height() - modal.height()) / 2 - parseInt(modal.css('padding-top'))

    Todo el crédito va a Sergey Barskiy.

    Esto es genial, pero si el usuario se ha desplazado ahora hacia abajo lo suficiente. El modal no ser visto. Se puede tomar en cuenta la cantidad que el usuario ha desplazado mediante la modificación de sus margin-top: dialog.css("margin-top", Math.max(0, ($(window).scrollTop()) + ($(window).height() - dialog.height()) / 2 ));

    OriginalEl autor Micah Winkelspecht

  5. 0

    He encontrado problema tratando de mostrar la imagen (con tamaño arbitrario) en el Angular de la interfaz de usuario modal de Bootstrap. Así

    1. He anexado adicional nombre de la clase «de ancho automático» para un diálogo div «modal».
      (En mi caso fue hecho con la ayuda de la «windowClass» parámetro)

    2. Tengo escribió SECS código:

      .ancho-auto {
      &.modal {
      text-align: center;
      }
      .modal-diálogo .modal-content {
      display: inline-block;
      width: auto;
      max-width: 99vw;
      overflow: hidden;
      }
      }

    y resolvió el problema.

    OriginalEl autor Alexander Levakov

Dejar respuesta

Please enter your comment!
Please enter your name here