首页 > 其他 > 详细

BootstrapDialog.show - 提示信息对话框

时间:2020-06-15 21:49:44      阅读:93      评论:0      收藏:0      [点我收藏+]

 

(1)最简单的实现方式:

BootstrapDialog.show
({ message:
‘Hi Apple!‘ });

还有一种更简单的实现方式:BootstrapDialog.alert(‘I want banana!‘); //异步加载 适合用在方法的最后

(2)buttons

BootstrapDialog.show({
  message : "message",
  buttons : [{
    label : "btn1",
    cssClass : "btn-primary"   //给按钮添加类名  可以通过此方式给按钮添加样式
    },{
      label : "btn2",
      icon : "glyphicon glyphicon-ban-circle"   //通过bootstrap的样式添加图标按钮
    },{
      label : "btn3",
      action : function(dialog){   //给当前按钮添加点击事件
        dialog.close();
      }
    }
  ]
});

(3)操作title、message 可以通过 setTitle 和 setMessage 操作title和message

BootstrapDialog.show({
  title : "this is a title!",    //title
  message : "Document Comtent",
  buttons : [{
    label : "cancel",
    action : function(dialog){
      dialog.setTitle("title2");   //操作title
      dialog.setMessage("message1");   //操作message
      dialog.close();
    }
  },{
    label : "Ok",
    action : function(dialog){
      dialog.close();
    }
  }]
})

(6)控制弹出框右上角的关闭按钮

BootstrapDialog.show({
  message: ‘Hi Apple!‘,
  closable: true,    //控制弹出框拉右上角是否显示 ‘x‘  默认为true
  buttons: [{
    label: ‘Dialog CLOSABLE!‘,
    cssClass: ‘btn-success‘,
    action: function(dialogRef){
      dialogRef.setClosable(true);
    }
  }, {
    label: ‘Dialog UNCLOSABLE!‘,
    cssClass: ‘btn-warning‘,
    action: function(dialogRef){
      dialogRef.setClosable(false);
    }
  }, {
    label: ‘Close the dialog‘,
    action: function(dialogRef){
      dialogRef.close();   //总是能关闭弹出框
    }
  }]
});

(7) 弹出框的尺寸

BootstrapDialog.show({
  title: ‘More dialog sizes‘,
  message: ‘Hi Apple!‘,
  size : BootstrapDialog.SIZE_NORMAL  //默认尺寸
  buttons: [{
    label: ‘Normal‘,
    action: function(dialog){
      dialog.setTitle(‘Normal‘);
      dialog.setSize(BootstrapDialog.SIZE_NORMAL);
    }
  }, {
    label: ‘Small‘,
    action: function(dialog){
      dialog.setTitle(‘Small‘);
      dialog.setSize(BootstrapDialog.SIZE_SMALL);
    }
  }, {
    label: ‘Wide‘,
    action: function(dialog){
      dialog.setTitle(‘Wide‘);
      dialog.setSize(BootstrapDialog.SIZE_WIDE);
    }
  }, {
    label: ‘Large‘,
    action: function(dialog){
      dialog.setTitle(‘Large‘);
      dialog.setSize(BootstrapDialog.SIZE_LARGE);
    }
  }]
});

https://www.jb51.net/article/105853.htm

BootstrapDialog.show - 提示信息对话框

原文:https://www.cnblogs.com/zhangguorenmi/p/13137820.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!