Problem with the bootstrap modal body created with the bootstrap3-dialog plugin from nakupanda

Question

Problem with the bootstrap modal body created with the bootstrap3-dialog plugin from nakupanda

Navigation

#1 by (0 votes)

0

The problem is that the content is not recognized by the modal-body and the content size is reduced to the minimum, edit the class of modal-body to panel-body and it is solved.

This reflects the content:

But I would like instead of modal-body to be panel-body so that it can look like this:

How could I solve it directly with the library? Clearly if possible.

The library has a part where it indicates how to manipulate elements of the modal, but I do not understand it very all right. The closest thing that I found was the part where it says Manipulating your dialog .

Here's the code I'm using:

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>

I add: If I am creating the elements incorrectly and therefore do not recognize them the modal-body I would appreciate the instruction how should I do it.

bootstrap dialogo bootstrap-3 modal

asked by Pablo Contreras 25.05.2017 в 08:06

source

1 answer

Errors when compiling project imported from GitHub. Android - Eclipse (Works in Debug mode) How to invoke a public static int variable in c #

score 0 · Accepted Answer

I solved it by editing the class

let content = dialogRef.getModalContent()[0];//obtengo el contenido del modal
let x = content.getElementsByClassName("modal-body")[0];//obtengo el div "modal-body"
x.setAttribute('class', 'panel-body');//y a continuación edito la clase

let dialog = new BootstrapDialog({
  title: 'Agregar',
  message: function(dialogRef){
  
    let content = dialogRef.getModalContent()[0];
  	let x = content.getElementsByClassName("modal-body")[0];
    x.setAttribute('class', 'panel-body');
  
  	let form = $('<form/>',{
      'id' : 'form_crear_item',
      'role'  : 'form'
    });
    let div = $('<div/>');
    let label_nombre = $('<label/>',{
      'for' : 'filter_campo',
      'class' : 'control-label col-sm-2',
      'text'    : 'Código: '
    });
    label_nombre.appendTo(div);
    let div_nombre = $('<div/>',{
      'class' : 'col-sm-10 col-xs-12',
    });
    let 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);
    
    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();
      }
    }
  }]
});

dialog.open();

<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>