MyPopup
版本 0.1.23
麥草CMS（MyCMS），簡約而不簡單。
MyPopup，做的很少。MyPopup就像alert、confirm、propmt等控件一樣僅僅彈出一個對話框，其他的交給回調函數yes和no甚至你綁定的事件處理函數，由你隨意支配。MyPopup，做的很多。大多數情況下，你不用去管MyPopup彈出的位置、寬度、高度等等，MyPopup都會智能做出判斷、渲染。
MyPopup是一個JavaScript（js）彈出層、彈窗、對話框組件。MyPopup遵循javascript邏輯，容易理解，上手簡單。MyPopup不僅模擬了alert、confirm、propmt等等控件，還擴展出tip（小提示框）、loading（加載中）、iframe（框架）、open（常規彈窗）、blank（空白彈出層）等等常用的彈出層。讓我最滿意的是tip()方法，它依附于目標彈出一個小提示框。tip()方法會根據目標元素智能渲染小提示框的位置和彈出方向。依據MyPopup的tip()方法可以輕松擴展出下拉菜單組件。小提示框有zhi（帶直角尾巴）、zhi1（帶邊框的直角尾巴）、jian（帶尖角尾巴）、noTail（不帶尾巴）四種樣式，調用方法是MyCMS.popup.tip("麥草CMS問候您",{tipStyle: "zhi"})。
簡單使用
先容我為MyPopup彈出層吹噓幾句。MyPopup彈出層同時兼容PC端和移動端；MyPopup彈出層用法簡單，js主文件引入是必不可少的，不再贅述，它的使用邏輯深度模仿alert、confirm、propmt等等原生對話框組件，簡單使用MyPopup彈出層時和使用它們相似；大多數js彈出層插件和其他js插件或js功能的耦合度都很低，MyPopup彈出層也不例外，這就注定了MyPopup彈出層插件很容易整合進其他的js框架，理論上MyPopup彈出層可以不經過任何改寫就能用在任何js框架中，具體我不好說，我沒用過任何js框架。
下載解壓縮后的文件夾一級目錄包含文件夾css、MyPopup，文件index.html，你只需要將MyPopup移入你的項目即可，其他的是演示文檔。
在頁面的頭部引入MyPopup文件夾下的MyPopup.js主文件。
//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, document.getElementById("target"), {color: red});//document.getElementById("target"),彈出tip的目標元素
//MyPopup彈出層返回彈出層的引用，你可以調用MyCMS.popup.colse()關閉彈出層。
var p = MyCMS.popup.loading();
MyCMS.popup.close(p);
options配置項簡介
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: "larger"}，tip專用，模仿百度百科移動端彈出層)，彈出層的外觀風格theme({theme: "myThenme"},自定義彈出層風格)，如果空白彈出層是捕獲自DOM元素是否拖離出來isOut({isOut: true}，默認值false，即不拖離)。目前只這么多接口，至于彈出層樣式若提供的接口不能滿足，你可以直接修改彈出層樣式表。
新增（2019/1/31）
新增func項，{func: function(index){//做想做的}}。在func函數中可以做一些與彈出層密切相關的事情。
變動（2019/2/13）
修正options配置項中tipType項賦值時單詞larger拼寫錯誤。由原來的lager改為larger。同步更新簡易文檔中larger拼寫錯誤。
修復自定義風格接口代碼塊中的BUG。
變動（2019/2/14）
徹底修正13日發現larger拼寫錯誤。
自定義風格
關于自定義風格，存放于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端和移動端
MyPopup同時兼容PC端和移動端。MyCMS智能判斷系統類型，渲染相應風格。MyPopup不依賴任何js庫。
暫時只這么介紹一下，會陸續完善文檔。
雜項
在互聯網高速發展的今天，Web前端彈出層組件多如牛毛，這只是我個人興趣之作，去年在網上閑逛發現layer彈出層，一時興起開始寫MyPopup，半途而廢，近日撿起來弄完了，MyPopup是個新生兒，在閱讀使用過程中的BUG、建議請至http://www.mycms.xyz指教。在這個萬物即將互聯的時代，閱讀方式不發生根本改變，javascript乃至整個web前端只會蓬勃發展
MyPopup使用Apache開源協議發布。后續會逐漸完善功能，解決兼容問題。那個懸浮的圓形關閉按鈕是最后于匆忙中完成，未做細致調整美化，不是那么美觀協調，請見諒。在閱讀使用過程中有任何BUG、建議，請至QQ群154340308留言指教。
下載
下載：http://www.mycms.xyz/MyPopup/MyPopup.rar
演示
演示：http://www.mycms.xyz/MyPopup/
圖片展示
