配置项 | 简介 | 示例 |
---|---|---|
尺寸参数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}); |