显示时模态关闭前一个模态

Question

我为我的模态创建了一个class，其中show方法创建了一个主模态，另一个创建了一个确认模态，当用户要关闭模态时调用（'do you really want to close?'), 但当我调用确认模式时，主模式关闭。

我正在使用这个库： https://nakupanda.github.io/bootstrap3-dialog/

模态代码：

class dialogModal{
  // class responsável pelo modal
  constructor(objModal){
      this.title = objModal.title
      this.message = objModal.message
      this.buttons = objModal.buttons
  }
  show(){
  // função para criar modal
      var dialog = new BootstrapDialog({
          title: this.title,
          message: this.message,
          buttons: this.buttons
      });
      dialog.open();
  }
  confirm(){
      var dialog = new BootstrapDialog({
          size: BootstrapDialog.SIZE_SMALL,
          title: 'do you really want to close?', 
          message: '<p>do you really want to close?</p>',
          buttons: [{ label: 'cancel', cssClass: 'btn btn-danger', action: function(dialogRef){dialogRef.close();}}, 
                    {label: 'close', cssClass: 'btn btn-primary', action: BootstrapDialog.closeAll ()}]
      });
      dialog.open();
  }
}

modal = new dialogModal({message: ''});
modal.title = '<h4>Edit</h4>'
modal.message = '<b>123</b>'
modal.buttons = [{ label: 'cancel', cssClass: 'btn btn-danger', action: modal.confirm},
{ label: 'save', cssClass: 'btn btn-primary',action:alert('ok')}];
modal.show();

<!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <!-- bootstrap JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <!--modal-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js" integrity="sha512-LbO5ZwEjd9FPp4KVKsS6fBk2RRvKcXYcsHatEapmINf8bMe9pONiJbRWTG9CF/WDzUig99yvvpGb64dNQ27Y4g==" crossorigin="anonymous"></script>

Answer 1

您应该将 function 传递给 action:，而不是调用 function。

即

您需要将 BootstrapDialog.closeAll() 更改为 BootstrapDialog.closeAll

class dialogModal{
  // class responsável pelo modal
  constructor(objModal){
      this.title = objModal.title
      this.message = objModal.message
      this.buttons = objModal.buttons
  }
  show(){
  // função para criar modal
      var dialog = new BootstrapDialog({
          title: this.title,
          message: this.message,
          buttons: this.buttons
      });
      dialog.open();
  }
  confirm(){
      var dialog = new BootstrapDialog({
          size: BootstrapDialog.SIZE_SMALL,
          title: 'do you really want to close?', 
          message: '<p>do you really want to close?</p>',
          buttons: [{ label: 'cancel', cssClass: 'btn btn-danger', action: function(dialogRef){dialogRef.close();}}, 
                    {label: 'close', cssClass: 'btn btn-primary', action: BootstrapDialog.closeAll }]
      });
      dialog.open();
  }
}

modal = new dialogModal({message: ''});
modal.title = '<h4>Edit</h4>'
modal.message = '<b>123</b>'
modal.buttons = [{ label: 'cancel', cssClass: 'btn btn-danger', action: modal.confirm},
{ label: 'save', cssClass: 'btn btn-primary',action:alert('ok')}];
modal.show();

<!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <!-- bootstrap JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <!--modal-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js" integrity="sha512-LbO5ZwEjd9FPp4KVKsS6fBk2RRvKcXYcsHatEapmINf8bMe9pONiJbRWTG9CF/WDzUig99yvvpGb64dNQ27Y4g==" crossorigin="anonymous"></script>

显示时模态关闭前一个模态

the modal closes the previous modal when show

javascript

twitter-bootstrap-3

bootstrap-modal