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

时间:2020-11-12 20:43:24

标签: javascript twitter-bootstrap-3 bootstrap-modal

我为模态创建了一个类,其中show方法创建一个主模态,另一个创建一个确认模态,当用户要关闭模态时将调用该确认模态(“您真的要关闭吗?”) ,但是当我调用确认模式时,主模式已关闭。

我正在使用此库: 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>

1 个答案:

答案 0 :(得分: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>