tpls - modal bootstrap angularjs

Ancho de diálogo Angular UI Bootstrap

Question

El diálogo Angular UI Bootstrap es fácil de implementar, pero difícil de personalizar.

¿Cómo diablos cambias el ancho? ¿O incluso el ancho máximo?

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

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

Answer 1

Así es como agrego otra clase al diálogo modal en angular usando el servicio $ dialog:

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

El cuadro de diálogo se abrirá con class = "modal myWindow"; tenga en cuenta que debe incluir ''modal'' o el contenido del cuadro de diálogo aparecerá debajo del fondo.

Entonces con este css puedes cambiar el ancho:

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

Tendrá que incluir el margen izquierdo negativo de 1/2 del ancho o estará descentrado.

Answer 2

Inspeccionar un cuadro de diálogo en la consola del navegador verá que el ancho está configurado solo con css. Las opciones en documentos permiten nombres de clase definidos por el usuario en el cuerpo y / o en el diálogo para que pueda ajustar varios tipos dentro de la página

Referencia de documentos: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md

Answer 3

La clase CSS predeterminada es modal , use la opción dialogClass (o el atributo de options si está usando la directiva modal ) para especificar clases de CSS adicionales, por ejemplo:

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

Para la directiva modal:

<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 está jugando con el ancho del diálogo, para que el diálogo esté centrado, la regla CSS necesita un margin-left negativo margin-left de la mitad del ancho:

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

[ACTUALIZAR]

ahora se llama windowClass y su regla css debe ser para el diálogo interno .modal-dialog, por lo que es como - .modal-huge .modal-dialog - SET

Auch, parece que nada está resuelto en el mundo javascript. Esto no se ha probado:

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

Para la directiva modal:

<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 está jugando con el ancho del diálogo, para que el diálogo esté centrado, la regla CSS necesita un margin-left negativo margin-left de la mitad del ancho:

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

Answer 4

Para la versión 0.8 / 0.9, el diseño ha cambiado, por lo que no especifica la clase modal, jugué un poco con ella y descubrí que puedo usar una definición de CCS anidada como esta:

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

Y cuando inicie el diálogo modal, especifique el estilo de Windows como este:

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

Pero tenga en cuenta que el estilo de Windows es para toda la ventana, incluido el fondo. Espero eso ayude