0

Estou usando o BootstrapDialog e tenho que mudar o texto com frequência, gostaria de uma dica de como tratar isso, segue o exemplo:

$(document).ready(function() {

  Janela = new BootstrapDialog.show({

    message: 'Primeira mensagem<br><br><br>',
    
    buttons: [{
      label: 'Troca mensagem',
      cssClass: 'btn-primary',
      action: function(dialogRef) {

        dialogRef.getModalBody().html('Segunda mensagem');

      }
    }, {
      label: 'Close',
      id: 'btnfechar',
      action: function(dialogRef) {
        dialogRef.close();
      }
    }]
  });

});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>

Quando o tamanhos da mensagens são diferentes o dialog dá uma quebrada feia, queria fazer essa transição de forma mais suave, pra isso o dialog teria que ira aumentando ou diminuindo de forma suave também

1 Resposta 1

4

E que tal um fadeIn / fadeOut para fazer a transição de forma menos agressiva:

$(document).ready(function() {

  Janela = new BootstrapDialog.show({

    message: 'Primeira mensagem<br><br><br>',
    
    buttons: [{
      label: 'Troca mensagem',
      cssClass: 'btn-primary',
      action: function(dialogRef) {

        var bodyEl = dialogRef.getModalBody();

        bodyEl.fadeOut(function() {
          $(this).text("Segunda mensagem")
        }).fadeIn();

      }
    }, {
      label: 'Close',
      id: 'btnfechar',
      action: function(dialogRef) {
        dialogRef.close();
      }
    }]
  });

});
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>

1
  • Bacana @Zuul, será que conseguimos fazer o dialog aumentar ou diminuir de forma suave tambem? Mas assim já melhorou muito.
    – user37466
    Commented 11/06/2016 às 2:09

Você deve fazer log-in para responder a esta pergunta.