87,907
社区成员
发帖
与我相关
我的任务
分享MyPopup，一个JavaScript（js）弹出层、弹窗、对话框组件
麦草CMS（MyCMS），简约而不简单。
MyPopup，做的很少。MyPopup就像alert、confirm、propmt等控件一样仅仅弹出一个对话框，其他的交给回调函数yes和no甚至你绑定的事件处理函数，由你随意支配。MyPopup，做的很多。大多数情况下，你不用去管MyPopup弹出的位置、宽度、高度等等，MyPopup都会智能做出判断、渲染。
MyPopup是一个JavaScript（js）弹出层、弹窗、对话框组件。MyPopup不仅模拟了alert、confirm、propmt等等控件，还扩展出tip（小提示框）、loading（加载中）、iframe（框架）、open（常规弹窗）、blank（空白弹出层）等等常用的弹出层。让我最满意的是tip()方法，它依附于目标弹出一个小提示框。tip()方法会根据目标元素智能渲染小提示框的位置和弹出方向。依据MyPopup的tip()方法可以轻松扩展出下拉菜单组件。小提示框有zhi（带直角尾巴）、zhi1（带边框的直角尾巴）、jian（带尖角尾巴）、noTail（不带尾巴）四种样式，调用方法是MyCMS.popup.tip("麦草CMS问候您",{tipStyle: "zhi"})。
在页面中引入myPopup.js主文件，可以注释掉myPopup.js中的MyCMS.popup.init()，然后在页面中引入myPopup/theme/default/myPopup.css样式表。
MyPopup提供了尺寸参数width、height，定位参数position("fix","absolute")、top("30px")、right("10%")、bottom、left、direction("vertical","horizontal"等参数决定小提示框是从目标的上下左右弹出)、tipPosition("follow","target"决定当鼠标事件触发小提示框时，小提示框是依附于鼠标弹出还是依附于目标弹出)，样式参数color、bgColor、titleColor、titleBgColor、contentBgColor、buttonColor、buttonBgcolor、border、tipStyle，回调函数yes、no，按钮参数buttons({buttons: ["你好", "你坏"]}或{buttons: "你好"}或{buttons: ["", ""]}不显示按钮，目前只处理最多两个数组项，多余的项忽略，只穿一个值(字符串或控数组项)时是“确定”按钮值)、closeBtn(是否显示关闭按钮,true或false)，定时关闭参数time({time: 5.8},参数是浮点数,单位是秒)，标题title，是否带遮罩shade，是否点击弹出层关闭弹出层outerClick(除了alert,confirm,propmt外默认值true)，移动端特殊效果tipType({tipType: "lager"}，tip专用)，弹出层的外观风格theme({theme: "myThenme"},自定义弹出层风格)，如果空白弹出层是捕获自DOM元素是否拖离出来isOut({isOut: true}，默认值false，即不拖离)。目前只这么多接口，至于弹出层样式若提供的接口不能满足，你可以直接修改弹出层样式表。
关于自定义风格，存放于myPopup的theme文件夹下，文件夹名即为风格名称(如myTheme)，样式表名称为myPopup.css，所有的样式声明在以风格名称未名的类下(如.myTheme .popup{...})。调用方式如下：
MyPopup同时兼容PC端和移动端。MyCMS智能判断系统类型，渲染相应风格。MyPopup不依赖任何js库。
暂时只这么介绍一下，会陆续完善文档。
在互联网高速发展的今天，Web前端弹出层组件多如牛毛，这只是我个人兴趣之作。在这个万物即将互联的时代，阅读方式不发生根本改变，javascript乃至整个web前端只会蓬勃发展。
MyPopup使用Apache开源协议发布。后续会逐渐完善功能，解决兼容问题。那个悬浮的圆形关闭按钮是最后于匆忙中完成，未做细致调整美化，不是那么美观协调，请见谅。在阅读使用过程中有任何BUG、建议，请至QQ群154340308留言指教。
下载：MyPopup
MyPopup，做的很少。MyPopup就像alert、confirm、propmt等控件一样仅仅弹出一个对话框，其他的交给回调函数yes和no甚至你绑定的事件处理函数，由你随意支配。MyPopup，做的很多。大多数情况下，你不用去管MyPopup弹出的位置、宽度、高度等等，MyPopup都会智能做出判断、渲染。
MyPopup是一个JavaScript（js）弹出层、弹窗、对话框组件。MyPopup不仅模拟了alert、confirm、propmt等等控件，还扩展出tip（小提示框）、loading（加载中）、iframe（框架）、open（常规弹窗）、blank（空白弹出层）等等常用的弹出层。让我最满意的是tip()方法，它依附于目标弹出一个小提示框。tip()方法会根据目标元素智能渲染小提示框的位置和弹出方向。依据MyPopup的tip()方法可以轻松扩展出下拉菜单组件。小提示框有zhi（带直角尾巴）、zhi1（带边框的直角尾巴）、jian（带尖角尾巴）、noTail（不带尾巴）四种样式，调用方法是MyCMS.popup.tip("麦草CMS问候您",{tipStyle: "zhi"})。
在页面中引入myPopup.js主文件，可以注释掉myPopup.js中的MyCMS.popup.init()，然后在页面中引入myPopup/theme/default/myPopup.css样式表。
//MyPopup调用：
MyCMS.popup.alert("麦草CMS向你打招呼！", {width: "100%", top: 0, left: 0, 等等等等});
MyCMS.popup.propmt("麦草CMS向你打招呼！", options);//options就是{width: "100%", top: 0, left: 0, 等等等等}(^~^)
MyCMS.popup.confirm("麦草CMS向你打招呼！");
//把MyCMS变短点：
var p = MyCMS.popup;
p.tip("麦草CMS向你打招呼！", {border: "1px solid red"});//内容是一个字符串
p.tip(document.getElementById("myDiv"), {tipStyle: "zhi1"});//内容捕获自一个HTML元素
var c = document.createElement("div");
var d = document.createElement("div");
var t = document.createTextNode("麦草CMS向你打招呼！");
d.appendChild(t);//内容捕获自一个动态创建的元素
c.appendChild(d);
p.tip(c);
//MyPopup弹出层返回弹出层的引用，你可以调用MyCMS.popup.colse()关闭弹出层。
var p = MyCMS.popup.loading();
MyCMS.popup.close(p);MyPopup提供了尺寸参数width、height，定位参数position("fix","absolute")、top("30px")、right("10%")、bottom、left、direction("vertical","horizontal"等参数决定小提示框是从目标的上下左右弹出)、tipPosition("follow","target"决定当鼠标事件触发小提示框时，小提示框是依附于鼠标弹出还是依附于目标弹出)，样式参数color、bgColor、titleColor、titleBgColor、contentBgColor、buttonColor、buttonBgcolor、border、tipStyle，回调函数yes、no，按钮参数buttons({buttons: ["你好", "你坏"]}或{buttons: "你好"}或{buttons: ["", ""]}不显示按钮，目前只处理最多两个数组项，多余的项忽略，只穿一个值(字符串或控数组项)时是“确定”按钮值)、closeBtn(是否显示关闭按钮,true或false)，定时关闭参数time({time: 5.8},参数是浮点数,单位是秒)，标题title，是否带遮罩shade，是否点击弹出层关闭弹出层outerClick(除了alert,confirm,propmt外默认值true)，移动端特殊效果tipType({tipType: "lager"}，tip专用)，弹出层的外观风格theme({theme: "myThenme"},自定义弹出层风格)，如果空白弹出层是捕获自DOM元素是否拖离出来isOut({isOut: true}，默认值false，即不拖离)。目前只这么多接口，至于弹出层样式若提供的接口不能满足，你可以直接修改弹出层样式表。
关于自定义风格，存放于myPopup的theme文件夹下，文件夹名即为风格名称(如myTheme)，样式表名称为myPopup.css，所有的样式声明在以风格名称未名的类下(如.myTheme .popup{...})。调用方式如下：
//全局调用(调用后整个页面应用该风格):
MyCMS.popup.init("myTheme");
MyCMS.popup.alert("全局配置我的弹出层风格");
//局部调用(只需要在具体弹出层的options配置项中加入theme参数即可，如{theme: "myTheme"}):
MyCMS.popup.alert("我要显得出众点", {theme: "myTheme"});MyPopup同时兼容PC端和移动端。MyCMS智能判断系统类型，渲染相应风格。MyPopup不依赖任何js库。
暂时只这么介绍一下，会陆续完善文档。
在互联网高速发展的今天，Web前端弹出层组件多如牛毛，这只是我个人兴趣之作。在这个万物即将互联的时代，阅读方式不发生根本改变，javascript乃至整个web前端只会蓬勃发展。
MyPopup使用Apache开源协议发布。后续会逐渐完善功能，解决兼容问题。那个悬浮的圆形关闭按钮是最后于匆忙中完成，未做细致调整美化，不是那么美观协调，请见谅。在阅读使用过程中有任何BUG、建议，请至QQ群154340308留言指教。
下载：MyPopup
...全文
请发表友善的回复…
发表回复
麦草CMS 2019-02-18
- 打赏
- 举报
javascript弹出层插件MyPopup已基本稳定。写此插件纯属个人兴趣，本人不从事it相关行业，没有使用需求。写了东西，不想它湮灭于茫茫网路。在此发一下。有兴趣的可以共同探讨，指点。
web前端弹出层用途广泛，如替代浏览器自带的alert、confirm、propmt等对话框组件，弹出一个风格统一的对话框。弹出一个带标题栏的iframe浮动框架。替代HTML a标签的title属性弹出一个统一风格的漂亮的提示条等等。MyPopup对这些做了封装。并对我在网上游逛时遇到的一些弹出层不友好体验做了修正，如MyPopup尽可能的让弹出层展示在浏览器的可视窗口内。
web前端弹出层用途广泛，如替代浏览器自带的alert、confirm、propmt等对话框组件，弹出一个风格统一的对话框。弹出一个带标题栏的iframe浮动框架。替代HTML a标签的title属性弹出一个统一风格的漂亮的提示条等等。MyPopup对这些做了封装。并对我在网上游逛时遇到的一些弹出层不友好体验做了修正，如MyPopup尽可能的让弹出层展示在浏览器的可视窗口内。
麦草CMS 2019-01-29
- 打赏
- 举报
又试了一下，在页面的<head>中引入MyPopup.js就没事了。包中式在页面结尾加载的，所以有问题。
展示：http://mycms.xyz/MyPopup/
麦草CMS 2019-01-29
- 打赏
- 举报
至于本地文件夹查看index.html,按钮悬浮问题，可能和样式表加载有关，MyPopup.js是动态加载MyPopup.css。正如上面所说，你可以注释掉MyPopup.js中的popup.init();，然后在页面中引入MyPopup/theme/default/MyPopup.css样式表，就没问题了。或者试着在页面的onloaded的回调函数中用应该也可以，这个我没试过。
