El problema es que el contenido no lo reconoce el modal-body
y se reduce el tamaño del contenido a lo mínimo, edite la clase del modal-body
a panel-body
y se soluciona.
Pero yo quisiera que en vez de modal-body
sea panel-body
para que se pueda ver así:
¿Como podría solucionarlo directamente con la librería?, claro si es posible.
La librería tiene una parte donde indica como manipular elementos del modal, pero no lo entiendo muy bien. Lo mas cercano que me pareció fue la parte donde dice Manipulating your dialog.
Acá el código que estoy usando:
var form = $('<form/>',{
'class' : 'form-horizontal',
'role' : 'form'
});
var div = $('<div/>');
var label_nombre = $('<label/>',{
'for' : 'filter_campo',
'class' : 'control-label col-sm-2',
'text' : 'Código: '
});
label_nombre.appendTo(div);
var div_nombre = $('<div/>',{
'class' : 'col-sm-10 col-xs-12',
});
var input_nombre = $('<input/>',{
'type' : 'text',
'class' : 'form-control',
'id' : 'filter_campo',
'name' : 'filter_campo',
});
input_nombre.appendTo(div_nombre);
div_nombre.appendTo(div);
div.appendTo(form);
var dialog = BootstrapDialog.show({
title: 'Agregar',
message: function(dialogRef){
return form;
},
cssClass: 'login-dialog',
buttons:
[{
label: 'Cancelar',
action: function(dialogRef) {
dialogRef.close();
}
},{
label: 'Ok',
cssClass: 'btn-primary',
action: function(dialogRef){
var fruit = dialogRef.getModalBody().find('input').val();
if($.trim(fruit.toLowerCase()) !== '123456') {
alert('Indique "123456"');
return false;
}else{
dialogRef.close();
}
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
Agrego: si estoy creando los elementos mal y por ende no los reconoce el modal-body
agradecería la instrucción de como debería hacerlo.