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

作者: 麦草CMS 日期: 2019/03/01 22:57:23
配置项简介示例
尺寸参数widthheight设置弹出层的高度,宽度。对应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});
定位参数toprightbottomleft定位弹出层。对应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"});
回调函数yesno

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

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