zoukankan      html  css  js  c++  java
  • BootstrapDialog.show

     外文资料:http://nakupanda.github.io/bootstrap3-dialog/

    (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

  • 相关阅读:
    MySQL (下篇)
    【JUC剖析】专栏总集篇
    CF1391D(思维)
    CF1393E2(字符串)
    洛谷P5405 [CTS2019]氪金手游(期望,容斥)
    P5293 [HNOI2019]白兔之舞(单位根反演)
    洛谷P5400 [CTS2019]随机立方体(计数)
    洛谷P5401 [CTS2019]珍珠(生成函数)
    支配树学习笔记
    UOJ455 雪灾与外卖(模拟费用流)
  • 原文地址:https://www.cnblogs.com/zhangguorenmi/p/13137820.html
Copyright © 2011-2022 走看看