El Angular de la interfaz de usuario de Bootstrap de Diálogo es fácil de implementar, pero difícil de personalizar.

Cómo en la tierra que cambiar el ancho? O incluso max-width?

http://angular-ui.github.com/bootstrap/#/dialog

He intentado $dialog.dialog({width:600}) y otras variaciones, pero no alegría.

InformationsquelleAutor Nick | 2013-03-29

4 Comentarios

  1. 6

    Inspeccionar un cuadro de diálogo en el navegador de la consola de ver que ancho es con css sólo. Opciones en google docs permite que los usuarios definidos los nombres de las clases en el cuerpo y/o en el cuadro de diálogo de modo que usted puede ajustar para diferentes tipos dentro de la página

    Docs referencia: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md

    • Que el enlace está muerto. Estoy seguro de que se han movido y no es tu problema, pero me está volviendo nueces porque no la puedo encontrar. ¿Tal vez más arriba-a-fecha de enlace?
    • href=»https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md» >github.com/angular-ui/bootstrap/blob/master/src/modal/docs/…
  2. 40

    Para la versión 0.8/0.9 el diseño ha cambiado, por lo que no se especifica el valor modal de la clase, me jugueteó un poco con él y encontré que se puede utilizar un anidada CCS definición como esta:

    .xx-dialog .modal-dialog {
        width :90%;
        min-width: 800px;
    }

    Y cuando se inicie el cuadro de diálogo modal especificar el windowsStyle como este:

    modalInstance = $modal.open({
            templateUrl: 'templates/editxxx.html',
            controller: EditXXCtrl,
            windowClass: 'xx-dialog',
            resolve: {
                xx_uuid: function () {
                    return xx_guid;
                }
            }
        });

    Pero ser conscientes de que la windowsstyle es para el CONJUNTO de la ventana incluyendo el telón de fondo .
    Espero que ayude

    • Sin duda la mejor solución. Funciona perfecto para la dinámica de ancho!
    • En el windowClass propiedad, puede llamar a varias clases en el css?
    • No sé, pero ya que usted tiene el correo de la clase debe ser capaz de abordar las clases de tiy necesidad. En mi proyecto no me han multinivel Clases en el interior del cuadro de modal. funciona de archivo con la clase normal definiciones CSS.
    • su, trabajando bien con .modal-contenido en lugar de .modal-diálogo
  3. 7

    El valor predeterminado de clase CSS es modal, el uso de la dialogClass opción (o la options atributo si usted está utilizando el modal directiva) para especificar otras clases CSS, por ejemplo:

    $dialog.dialog({dialogClass: 'modal modal-huge'});

    Para el modal directiva:

    <div modal="modalVisible" close="close()" 
         options="{dialogClass:'modal modal-huge'}">
       <div class="modal-header"><h3>Hello</h3></div>
       <div class="modal-body">Hello world!</div>
       <div class="modal-footer">
            <button ng-click="dialogs.escolherModelo=false" 
                    class="cancel btn btn-warning">Cancel</button>
       </div>
    </div>

    Si usted está jugando con el cuadro de diálogo ancho, con el fin de tener el cuadro de diálogo centrado, la regla CSS necesidades de un negativo margin-left de la mitad de la anchura:

    .modal-huge {
        width: 80%;
        margin-left: -40%;
    }
    @media (max-width: 600px) {
        .modal-huge {
            width: 580px;
            margin-left: -290px;
        }
    }

    [ACTUALIZACIÓN]

    ahora se llama windowClass y su regla css debe ser para interior .modal-diálogo, por lo que es – .modal-enorme .modal-diálogo – SET

    ¡Ay, parece que nada es nunca se asentaron en el javascript mundo. Esto no está probado:

    $dialog.dialog({windowClass: 'modal-huge'});

    Para el modal directiva:

    <div modal="modalVisible" close="close()" 
         options="{windowClass:'modal-huge'}">
       <div class="modal-header"><h3>Hello</h3></div>
       <div class="modal-body">Hello world!</div>
       <div class="modal-footer">
            <button ng-click="dialogs.chooseModel=false" 
                    class="cancel btn btn-warning">Cancel</button>
       </div>
    </div>

    Si usted está jugando con el cuadro de diálogo ancho, con el fin de tener el cuadro de diálogo centrado, la regla CSS necesidades de un negativo margin-left de la mitad de la anchura:

    .modal-dialog .modal-huge {
        width: 80%;
        margin-left: -40%;
    }
    @media (max-width: 600px) {
        .modal-dialog .modal-huge {
            width: 580px;
            margin-left: -290px;
        }
    }
    • ahora se llama windowClass y su regla css debe ser para interior .modal-diálogo, así es como – .modal-huge .modal-dialog
    • Gracias por la información, trató de actualización de la respuesta, pero me falta el tiempo para probarlo – si descubre algún error y se siente como hacerlo, por favor arreglar mi respuesta.
    • gracias por la corrección, los moderadores injustamente rechazado su edición (por desgracia muchos de ellos no se molestan en leer los comentarios).
    • También nótese que el espacio en la regla: .modal-huge .modal-dialog. windowClass se aplicará clase al cuadro de diálogo principal div, pero tenemos que cambiar la anchura es de los padres .modal-dialog. También no hay necesidad de hacer options="{windowClass:'modal-dialog modal-huge'}", sólo options="{windowClass:'modal-huge'}"
  4. 3

    He aquí cómo puedo añadir otra clase al cuadro de diálogo modal en angular utilizando el $servicio de diálogo:

    var opts = {
        backdrop: true,
        keyboard: true,
        backdropClick: true,
        templateUrl: 'my-partial.html',
        controller: 'MyPartiallController',
        dialogClass: 'modal myWindow'
    };
    var d = $dialog.dialog(opts);
    d.open();

    Se abrirá el diálogo con class=»modal myWindow» – nota tiene que incluir ‘modal’ o el cuadro de diálogo contenido aparecerá debajo del telón de fondo.

    Entonces con este css se puede cambiar el ancho:

    .modal.myWindow {
        width:700px;
        margin-left:-350px
    }

    Tendrás que incluir el negativo de la margen izquierda de la 1/2 del ancho o fuera del centro.

Dejar respuesta

Please enter your comment!
Please enter your name here