Проблема с модальным телом bootstrap, созданным с помощью плагина bootstrap3-dialog накупанды

Проблема заключается в том, что контент не распознается modal-body, а размер контента уменьшается до минимума, отредактируйте класс с modal-body до panel-body, и он решен.

Это отражает содержание: contenido malo

Но я бы хотел, чтобы вместо modal-body было panel-body так это может выглядеть так: introducir la descripción de la imagen aquí

Как я могу решить эту проблему напрямую с библиотекой? Конечно, если это возможно.

В библиотеке есть часть, где указывается, как манипулировать элементами модального стиля, но я не очень хорошо понимаю это. Самой близкой вещью, которую я нашел, была часть, где написано Управление вашим диалогом .

Вот код, который я использую:

var form = $('
',{ 'class' : 'form-horizontal', 'role' : 'form' }); var div = $('
'); var label_nombre = $('
',{ 'class' : 'col-sm-10 col-xs-12', }); var input_nombre = $('',{ '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(); } } }] });




Я добавляю : Если я создаю неправильные элементы и поэтому не распознаю их, modal-body я был бы признателен за инструкции о том, как я должен это делать.

0
задан 24.05.2017, 23:06
1 ответ

Я это решил издавая класс

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>
0
ответ дан 30.10.2019, 02:07

Теги

Похожие вопросы