free-mask-dialog

It is a free dialog with full screen mask

How use ?

 const maskDialog = require('free-mask-dialog');
 let mask = new maskDialog({
     title:'This is title',
     content:'This is content',
 })

API function

show ()

---

show the dialog

eq：mask.show()

hide ()

---

hide the dialog

eq：mask.hide()

showBefore(cb)

---

call the cb function before show the dialog

hideAfter(cb)

---

call the cb function after hide the dialog

other option

---

closeBtnEle [String | Array]

---

you can add the classname to emit close action

bg [Boolean]

---

you can control the mask-bg show or hide

title [String]

---

set the title for the dialog

content [String]

---

set the content for the dialog

z-index [Number]

---

set the class of the z-index for the dialog. when you setted the param —— z-index with the dialog will change the mask-bg's z-index

width [Number|String]

---

set the dialog width support the percentage

height [Number|String]

---

set the dialog height support the percentage

closeBtn [Boolean]

---

set the closeBtn show or hide

closeBtnEle [String]

---

control and add the element's class with this parameter in the close button

scroll [Boolean]

---

set the webpack cann't scroll. The defaults value is true

canClose [Boolean]

---

if the value is true will emit dialog hide function when click the mask-bg

style [String]

---

add the className for the mask_dialog_main. you can use it do anything. such as change the class with the dialog. the default value is default

autoInitContent [Boolean]

---

auto refresh the dialog setting before emit show function.The default value is true. If the param value is false will jump over the render function

btn [Array]

---

just only support Array

• content : the btn text
• url : the btn link
• cb : the btn click function
• target : open link method

such as:

let mask = new maskDialog({
  title: "This is title",
  content: "This is content",
  btn: [
    {
      content: "btn 1",
      cb: () => {
        alert(2);
      }
    },
    {
      content: "btn 2",
      target: "_blank",
      url: "https://www.google.com"
    }
  ]
});

中文文档

let mask = new maskDialog({
    'closeBtnEle':'.mask_dialog_close' //默认.mask_dialog_close [optional]
    'bg': Boolean //[optional]
    'title':String  
    'content':String  
    'z-index': Number //层级(number),设置的是 bg 的层级，联动会设置弹窗 [optional]
    'width': 200, //宽度：可传递各种单位，默认 100%
    'height': 300, //高度：可传递各种单位
    'closeBtn':Boolean, //关闭按钮,false 不显示  [optional]
    'scroll': Boolean //页面滚动：false 为不可滚动，默认为 true 可滚动 [optional]
    'canClose':Boolean //点击关闭：false 为不可以点击关闭，默认为 true 可点击关闭 [optional]
    'style': String //'类名，控制修改 class=mask_dialog_main 的 同级类,默认是 default,可以由此来控制对话框样式', [optional]
    'autoInitContent':false, //每次 show 都会重新，默认为 true,不启动传 false [optional]
});
 
mask.show(); // 显示提示框，传显示内容，一般为 STRING——DOM
mask.hide(); // 隐藏提示框
mask.showBefore(){}; //显示回调
mask.hideAfter(){}; //隐藏回调