菜单

于定义弹出框

2018年11月15日 - Bootstrap

插件官方地址:http://bootboxjs.com/

alert:

1
bootbox.alert("Hello world!"function() {});

dialog:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
bootbox.dialog({
  // dialog的内容
  message: "I am a custom dialog",
   
  // dialog的标题
  title: "Custom title",
   
  // 退出dialog时的回调函数,包括用户使用ESC键及点击关闭
  onEscape: function() {},
   
  // 是否显示此dialog,默认true
  show: true,
   
  // 是否显示body的遮罩,默认true
  backdrop: true,
   
  // 是否显示关闭按钮,默认true
  closeButton: true,
   
  // 是否动画弹出dialog,IE10以下版本不支持
  animate: true,
   
  // dialog的类名
  className: "my-modal",
   
  // dialog底端按钮配置
  buttons: {
     
    // 其中一个按钮配置
    success: {   
      // 按钮显示的名称
      label: "Success!",
       
      // 按钮的类名
      className: "btn-success",
       
      // 点击按钮时的回调函数
      callback: function() {}
    },
     
    // 另一个按钮配置
    "Danger!": {
      className: "btn-danger",
      callback: function() {}
    }
  }
});

默认的modal是固定宽度的,bootbox也未例外,那么什么样吃弹有框能自定义宽度为?我们可以使点提到的dialog的className,定义一个class,然后对class设置width即可。


相遇一个需由定义弹出框的花色,找到了一个感觉较好之js代码。收藏一下

//限制页面是否可滚动(弹窗出现时)var doc = document.documentElement;var
preventDefault = function (e) {e.preventDefault();}function stop()
{doc.style.overflow =
‘hidden’;doc.addEventListener(‘touchmove’,preventDefault,false);}function
scroll() {doc.style.overflow =
‘auto’;doc.removeEventListener(‘touchmove’,preventDefault,false);}function
dialog(obj){var $body = $(‘body’);obj.width = obj.width||’380px’;//var
html = ”+                ‘

‘ +                    ‘

提示’ +            ‘X

‘+                    ‘

‘+obj.text+’

‘;if(obj.button){console.log(‘a’)html = html +  ‘

取消

‘        }html = html + ‘

‘;$(html).appendTo($body)        stop();}function closeDialog()
{$(“#commonDialog”).remove();scroll();}    dialog({        text: ‘

规定删除?

确定删除?

‘,        button: true,        event: ‘_delete’    })    function
_delete(){    closeDialog();        dialog({            text:
‘已删除’,            button: false        })    }

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图