div+css+javascript弹出层,弹窗,对话框,web弹出层插件MyPopup options配置项简介

作者: 麦草CMS 日期: 2019/03/01 22:57:23
配置项简介示例
尺寸参数width、height设置弹出层的高度，宽度。对应CSS同名属性，键值对是对应的任何有效的CSS属性名值对。默认高宽自适应（智能计算最佳值，frame类型除外）通常不需设置。MyCMS.popup.alert("麦草CMS欢迎你！"，{width: "300px", height: "200px"});
定位参数position定位弹出层。值是absolute,fixed,relative，对应CSS同名属性，键值对是对应的任何有效的CSS属性名值对。默认值是fixed。通常不需设置。MyCMS.popup.alert("麦草CMS欢迎你！"，{position: "absolute", top: "200px", left: 0});
定位参数top、right、bottom、left定位弹出层。对应CSS同名属性，键值对是对应的任何有效的CSS属性名值对。弹出层默认水平垂直居中（tip类型弹出层除外）。通常不需设置。MyCMS.popup.alert("麦草CMS欢迎你！"，{position: "absolute", top: "200px", left: 0});
tip类型弹出层专用定位参数direction设置弹出层相对于其依附目标的弹出方向。值是vertical，horizontal。默认值是vertical。MyCMS.popup.tip("麦草CMS欢迎你！", document.getElementById("target"), {direction: "horizontal"});
tip类型弹出层专用定位参数tipPosition设置当鼠标事件触发小提示框时，小提示框是依附于鼠标弹出还是依附于目标弹出。值是follow，target。默认值是target。MyCMS.popup.tip("麦草CMS欢迎你！", document.getElementById("target"), {tipPosition: "follow"});

风格订制相关参数：字体颜色样式color

设置弹出层整体的字体颜色。对应CSS同名属性，键值对是对应的任何有效的CSS属性名值对。MyCMS.popup.alert("麦草CMS欢迎你！"，{color: "red"});
风格订制相关参数：背景颜色样式bgColor

设置弹出层整体的背景颜色。对应CSS background属性，值是对应的任何有效的CSS属性值。

MyCMS.popup.alert("麦草CMS欢迎你！"，{bgColor: "green"});
风格订制相关参数：标题字体颜色样式titleColor

设置弹出层标题字体颜色。对应CSS color属性，值是对应的任何有效的CSS属性值。

MyCMS.popup.alert("麦草CMS欢迎你！"，{titleColor: "yellow"});
风格订制相关参数：标题背景颜色样式titleBgColor

设置弹出层标题背景颜色。对应CSS background属性，值是对应的任何有效的CSS属性值。

MyCMS.popup.alert("麦草CMS欢迎你！"，{titleBgColor: "#eee"});
风格订制相关参数：内容背景颜色样式contentBgColor

设置弹出层内容背景颜色。对应CSS background属性，值是对应的任何有效的CSS属性值。

MyCMS.popup.alert("麦草CMS欢迎你！"，{contentBgColor: "#eee"});
风格订制相关参数：按钮字体颜色样式buttonColor

设置弹出层按钮字体颜色。对应CSS color属性，值是对应的任何有效的CSS属性值。

MyCMS.popup.alert("麦草CMS欢迎你！"，{buttonColor: "blue"});
风格订制相关参数：按钮背景颜色样式buttonBgcolor

设置弹出层按钮背景颜色。对应CSS background属性，值是对应的任何有效的CSS属性值。

MyCMS.popup.alert("麦草CMS欢迎你！"，{buttonBgcolor: "white"});
风格订制相关参数：弹出层边框样式border

设置弹出层边框样式。对应CSS border属性，值是对应的任何有效的CSS属性值。

MyCMS.popup.alert("麦草CMS欢迎你！"，{border: "1px solid red"});
tip类型弹出层专用tipStyle

设置tip类型弹出层外观风格。值为zhi（带直角尾巴）、zhi1（带边框的直角尾巴）、jian（带尖角尾巴）、noTail（不带尾巴）。

MyCMS.popup.tip("麦草CMS欢迎你！", document.getElementById("target"), {tipStyle: "zhi1"});
回调函数yes、no

设置当点击弹出层确定，取消按钮时对应的回调函数。

MyCMS.popup.confirm("麦草CMS欢迎你！"，{yes: function(){ MyCMS.popup.alert("yes")});
按钮参数buttons

设置弹出层按钮的文字。{buttons: ["你好", "你坏"]}或{buttons: "你好"}或{buttons: ["", ""]}将不显示按钮，目前只处理最多两个数组项，多余的项忽略，只传一个值(字符串或空数组项)时对应“确定”按钮。

MyCMS.popup.alert("麦草CMS欢迎你！"，{buttons: "我承认"});
closeBtn

设置是否显示关闭按钮。值是布尔类型。默认值是false。

MyCMS.popup.alert("麦草CMS欢迎你！"，{closeBtn: true});
定时关闭参数time

设置定时关闭弹出层。值是浮点数类型，如5.8，单位是秒。

MyCMS.popup.alert("麦草CMS欢迎你！"，{time: 5.8});
标题title

设置弹出层标题文字，值是字符串类型。

MyCMS.popup.alert("麦草CMS欢迎你！"，{title: "我说："});
是否带遮罩shade

设置弹出层是否带遮罩层。值是布尔类型。alert,confirm,propmt除外，默认值是false。

MyCMS.popup.alert("麦草CMS欢迎你！"，{shade: true});
点击弹出层外部是否关闭弹出层outerClick

设置当鼠标单击弹出层外部时，是否关闭对应弹出层。值是布尔类型。alert,confirm,propmt除外，默认值是true。

MyCMS.popup.alert("麦草CMS欢迎你！"，{outerClick: false});
移动端特殊效果tipType

tip专用，模仿百度百科移动端弹出层效果。值是normal，larger。默认值是normal。

MyCMS.popup.tip("麦草CMS欢迎你！", document.getElementById("target"), {tipType: "larger"});
自定义弹出层的外观风格theme

设置弹出层弹出层的外观风格。自定义风格文件存放于MyPopup的theme文件夹下，文件夹名即为风格名称(如myTheme)，样式表名称为MyPopup.css，所有的样式声明在以风格名称为名的类下(如.myTheme .popup{...})

MyCMS.popup.alert("麦草CMS欢迎你！"，{theme: "myTheme"});
blank类型弹出层专用项isOut

设置当空白弹出层内容是捕获自DOM元素时是否把被捕获元素拖离出来并删除。这将不保留文档位置。值是布尔类型。默认值是false。

MyCMS.popup.blank("麦草CMS欢迎你！"，{isOut: true});
回调函数func（2019/1/31新增）

{func: function(index){//做想做的}}。在func函数中可以做一些与弹出层密切相关的事情。index参数是弹出层dom节点的引用。

MyCMS.popup.blank("<div id=test>test</div>"，{func: function(index){//做想做的}});
tip类型弹出层专用isInsertTo（2019/2/20新增）

设置是否将tip类型弹出层插入到依附目标的文档流中，并占位。定位参数position将被设为relative。只是布尔类型，默认值是false。此项处于实验阶段，功能相对很弱。

MyCMS.popup.tip("麦草CMS欢迎你！", document.getElementById("target"), {isInsertTo: true});
我还说什么呢？
0.0024271011352539