├── iframe.html ├── README.md ├── MDialog.css ├── css └── Global.css ├── MDialog.min.js ├── MDialog.js └── index.html /iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | iframe Test 6 | 7 | 8 |
9 | 数据传递测试：

10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 | 20 | 21 | 60 |
61 | 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MDialog.js 2 | 3 | 寻求简单，精简的网页对话框，专注于友好的接口，千里之行，始于足下。 4 | 5 | ## Demo参考 6 | 7 | 8 | 9 | ## Update Ver 2.2.0 (2014-11-30) 10 | 1. 修复 button 方法直接传入 html 不显示的问题 11 | 2. 修复 $M().Msg() 方法下 下样式问题 12 | 13 | ## Update Ver 2.1.1 (2014-11-04) 14 | 1. 修正 jQuery ui Dialog 样式冲突的问题 15 | 2. 修复锁屏高度计算出错问题 16 | 17 | ## Update Ver 2.1 (2014-10-30) 18 | 此版本增加了 iframe 载入事件 和 数据相互之间传递，及一些弹窗细节修改 19 | 20 | 1. 增加 iframe 载入完成后的事件 oniframeload 详情参考API oniframeload 参数 21 | 2. 增加 MDialog 数据之间传递功能 data 参数 详情参考API data 参数 22 | 3. 修改 弹窗弹出 CSS3 动画 23 | 4. 修正 iframe Loading 界面样式出错问题 24 | 25 | ## Update Ver 2.0 (2014-10-09) 26 | 此版本增加了 iframe 框架功能，及一些弹窗细节修改 27 | 28 | 1. 增加了弹窗的最小宽和高度 29 | 2. 增加了气泡对话框简洁方法 $M().msg( content ); 详情参考API msg() 方法 30 | 3. 增强引用 iframe 框架功能，在不跨域情况下，弹窗宽高自适应，如有设定宽高，按设定的来 31 | 4. 增加 $M.getIframe(window.name) 方法 用于获取当前 iframe 的弹窗对象 详情参见API iframe 参数 32 | 5. iframe 具体用法可参考 Demo 案例中的 iframe.html 页面 33 | 6. 增加 iframe loading 交互 34 | 7. 废除了$M.iframe() 的方法 35 | 8. 增强了 $M.content() 方法的健壮性，支持 HTMLElement 36 | 37 | ## Update Ver 1.1 (2014-07-22) 38 | 39 | 1. 增加 untitle, unclose, iframe 配置参数 40 | 2. 增加 untitle( Boolean ), iframe( URL ) 方法 41 | 3. 支持 AMD的方式 加载 如 require.js 42 | 4. 修正若干 Bug 43 | 5. 新增加的配置参数和方法，请到Demo页查看具体使用方法 44 | 45 | ## 如何使用插件 46 | 47 | ```html 48 | 1.务必使用正确的 HTML 文档申明 如： 49 | XHTML 申明 50 | 或者 51 | HTML5 申明 52 | 53 | 2.引入文件 54 | 55 | 56 | ``` 57 | 58 | ## 初始化对话框 59 | 60 | ```javascript 61 | $M({ 62 | title: 'MDialog', 63 | content:'

欢迎使用 MDialog 对话框！

' 64 | }); 65 | ``` 66 | 67 | 更多用法请参考 Demo 页。 68 | 69 | ## 程序说明 70 | 71 | 1. 本人也是在学习 JavaScript ，程序在使用时避免不了出现意外的Bug和缺少功能。 72 | 2. 在使用前，请认真阅读插件文档。 73 | 3. 如本插件有幸应用到你的项目中，谢谢你的支持。 74 | 4. 程序兼容性: 理论兼容IE6+，Google Chrome, FireFox，但在IE6下难免会出意料之外的Bug。 75 | 5. 意见反馈: 如有一些使用问题或者插件的Bug，请到 我的博客 里联系我 76 | 77 | ## 联系作者 78 | 79 | Blog： 80 | Weibo： 81 | -------------------------------------------------------------------------------- /MDialog.css: -------------------------------------------------------------------------------- 1 | /** 2 | * M.MDialog 2.2.0 3 | * Date: 2014-07-10 4 | * Update: 2014-11-30 5 | * (c) 2014-2014 M.J, http://webjyh.com 6 | * 7 | * This is licensed under the GNU LGPL, version 2.1 or later. 8 | * For details, see: http://creativecommons.org/licenses/LGPL/2.1/ 9 | * 10 | */ 11 | /* MDialog ui-wrap */ 12 | .ui-MDialog-wrap { 13 | width: auto; 14 | display: none; 15 | background: #cbcbcb; 16 | background: rgba( 0, 0, 0, 0.3 ); 17 | font-family: Helvetica, arial, sans-serif; 18 | font-size: 14px; 19 | color: #555; 20 | border-radius: 3px; 21 | box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 22 | -webkit-animation:transform-scale .4s; 23 | animation:transform-scale .4s; 24 | -webkit-user-select: none; 25 | -moz-user-select: none; 26 | } 27 | .ui-MDialog-wrap.ui-MDialog-focus { 28 | box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2 ); 29 | } 30 | 31 | .ui-MDialog-wrap .MDialog-wrapper { 32 | margin: 5px; 33 | } 34 | 35 | /* MDialog ui-table */ 36 | .ui-MDialog-wrap .ui-MDialog-table { 37 | background-color: #FFF; 38 | padding: 0px; 39 | margin: 0px; 40 | border: none; 41 | } 42 | .ui-MDialog-wrap .ui-MDialog-table thead, 43 | .ui-MDialog-wrap .ui-MDialog-table tbody, 44 | .ui-MDialog-wrap .ui-MDialog-table tfoot, 45 | .ui-MDialog-wrap .ui-MDialog-table th, 46 | .ui-MDialog-wrap .ui-MDialog-table tr, 47 | .ui-MDialog-wrap .ui-MDialog-table td { 48 | background-color: #FFF; 49 | padding: 0px; 50 | margin: 0px; 51 | } 52 | /* MDialog ui-header */ 53 | .ui-MDialog-wrap .ui-MDialog-header { 54 | position: relative; 55 | border-bottom: 1px solid #DDD; 56 | _height: 100%; 57 | } 58 | 59 | /* MDialog ui-title */ 60 | .ui-MDialog-wrap .ui-MDialog-title { 61 | font-weight: bold; 62 | padding: 10px 35px 10px 10px; 63 | white-space: nowrap; 64 | overflow: hidden; 65 | cursor: move; 66 | text-overflow: ellipsis; 67 | } 68 | /* MDialog ui-close */ 69 | .ui-MDialog-wrap a:link.ui-MDialog-close, 70 | .ui-MDialog-wrap a:visited.ui-MDialog-close { 71 | position: absolute; 72 | display: block; 73 | width: 18px; 74 | height: 18px; 75 | line-height: 18px; 76 | text-align: center; 77 | right: 10px; 78 | top: 50%; 79 | font-weight: bold; 80 | font-size: 16px; 81 | margin-top: -9px; 82 | text-decoration: none; 83 | color: #AAA9A9; 84 | outline: none; 85 | border-radius: 2px; 86 | overflow: hidden; 87 | color: #FFF; 88 | background: #BBB; 89 | -webkit-transition: all 0.3s; 90 | -moz-transition: all 0.3s; 91 | transition: all 0.3s; 92 | } 93 | 94 | .ui-MDialog-wrap a:hover.ui-MDialog-close, 95 | .ui-MDialog-wrap a:active.ui-MDialog-close { 96 | background-color: red; 97 | color: #FFF; 98 | -webkit-transform: rotate(360deg); 99 | -moz-transform: rotate(360deg); 100 | transform: rotate(360deg); 101 | } 102 | 103 | 104 | .ui-MDialog-wrap .ui-MDialog-header .untitle { 105 | width: 23px !important; 106 | height: 23px !important; 107 | top: 0px !important; 108 | right: 0px !important; 109 | border-radius: 50% !important; 110 | line-height: 22px !important; 111 | box-shadow: 0px 0px 5px rgba( 0, 0, 0, 0.4 ); 112 | margin: -12px -12px 0px 0px !important; 113 | } 114 | 115 | /* MDialog ui-content */ 116 | .ui-MDialog-wrap .ui-MDialog-content { 117 | min-width: 160px; 118 | min-height: 22px; 119 | } 120 | 121 | .ui-MDialog-wrap .ui-MDialog-loading .loading-text { 122 | position: absolute; 123 | top: 45%; 124 | left: 45%; 125 | display: block; 126 | text-align: center; 127 | font-size: 16px; 128 | } 129 | 130 | .ui-MDialog-wrap .ui-MDialog-msg { 131 | min-width: 0; 132 | min-height: 0; 133 | line-height: 1; 134 | } 135 | 136 | /* MDialog ui-footer */ 137 | .ui-MDialog-wrap .ui-MDialog-footer { 138 | padding: 0px 15px 15px; 139 | } 140 | 141 | /* MDialog ui-MDialog-statusbar */ 142 | .ui-MDialog-wrap .ui-MDialog-statusbar { 143 | float: left; 144 | padding: 3px 0px; 145 | color: #888; 146 | font-size:13px; 147 | white-space: nowrap; 148 | margin-right: 20px; 149 | } 150 | 151 | /* MDialog ui-bottom */ 152 | .ui-MDialog-wrap .ui-MDialog-bottom { 153 | float: right; 154 | white-space: nowrap; 155 | } 156 | 157 | .ui-MDialog-wrap .ui-MDialog-bottom button { 158 | width: auto; 159 | display: inline-block; 160 | margin:0px 2px; 161 | padding: 4px 15px; 162 | text-align: center; 163 | white-space: nowrap; 164 | text-align: center; 165 | cursor: pointer; 166 | border: 1px solid #CCC; 167 | color: #333; 168 | margin-bottom: 0px; 169 | background-color: #FFF; 170 | outline:none; 171 | border-radius: 2px; 172 | *zoom: 1; 173 | *padding: 0px 8px; 174 | } 175 | 176 | .ui-MDialog-wrap .ui-MDialog-bottom button:hover { 177 | color: #333333; 178 | background-color: #ebebeb; 179 | border-color: #adadad; 180 | } 181 | 182 | .ui-MDialog-wrap .ui-MDialog-bottom button:active { 183 | -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 184 | -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 185 | box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); 186 | } 187 | 188 | .ui-MDialog-wrap .ui-MDialog-bottom button.ui-MDialog-autofocus { 189 | color: #FFF; 190 | background-color: #3276B1; 191 | border-color: #357EBD; 192 | } 193 | 194 | .ui-MDialog-wrap .ui-MDialog-bottom button.ui-MDialog-disabled { 195 | background-color: #FFF; 196 | border-color: #CCC; 197 | color: #999; 198 | cursor: not-allowed; 199 | } 200 | 201 | /* 防止动画过程有闪烁 */ 202 | .ui-MDialog-wrap a:link.ui-MDialog-close, 203 | .ui-MDialog-wrap a:visited.ui-MDialog-close, 204 | .ui-MDialog-wrap a:hover.ui-MDialog-close, 205 | .ui-MDialog-wrap a:active.ui-MDialog-close, 206 | .ui-MDialog-lock, 207 | .ui-MDialog-wrap { 208 | -webkit-backface-visibility: hidden; 209 | -moz-backface-visibility: hidden; 210 | -ms-backface-visibility: hidden; 211 | backface-visibility: hidden; 212 | 213 | -webkit-perspective: 1000; 214 | -moz-perspective: 1000; 215 | -ms-perspective: 1000; 216 | perspective: 1000; 217 | } 218 | 219 | .ui-MDialog-lock { 220 | -webkit-animation:lock-fadeIn .4s; 221 | animation:lock-fadeIn .4s; 222 | } 223 | 224 | @keyframes lock-fadeIn { 225 | 0% { opacity:0; } 226 | } 227 | 228 | @-webkit-keyframes lock-fadeIn { 229 | 0% { opacity:0; } 230 | } 231 | 232 | @keyframes transform-scale { 233 | 0%{opacity:0;transform:scale(0.2);-ms-transform:scale(0.2);} 234 | 60%{opacity:.75;transform:scale(1.1);-ms-transform:scale(1.1);} 235 | 100%{opacity:1;transform:scale(1);-ms-transform:scale(1);} 236 | } 237 | @-moz-keyframes transform-scale { 238 | 0%{opacity:0;-moz-transform:scale(0.2);} 239 | 60%{opacity:.75;-moz-transform:scale(1.1);} 240 | 100%{opacity:1;-moz-transform:scale(1);} 241 | } 242 | @-webkit-keyframes transform-scale { 243 | 0%{opacity:0;-webkit-transform:scale(0.2);} 244 | 60%{opacity:.75;-webkit-transform:scale(1.1);} 245 | 100%{opacity:1;-webkit-transform:scale(1);} 246 | } 247 | @-o-keyframes transform-scale { 248 | 0%{opacity:0;-o-transform:scale(0.2);} 249 | 60%{opacity:.75;-o-transform:scale(1.1);} 250 | 100%{opacity:1;-o-transform:scale(1);} 251 | } -------------------------------------------------------------------------------- /css/Global.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | html, body, div, span, applet, object, iframe, 3 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 4 | a, abbr, acronym, address, big, cite, code, 5 | del, dfn, em, img, ins, kbd, q, s, samp, 6 | small, strike, strong, sub, sup, tt, var, 7 | b, u, i, center, 8 | dl, dt, dd, ol, ul, li, 9 | fieldset, form, label, legend, 10 | table, caption, tbody, tfoot, thead, tr, th, td, 11 | article, aside, canvas, details, embed, 12 | figure, figcaption, footer, header, hgroup, 13 | menu, nav, output, ruby, section, summary, 14 | time, mark, audio, video { 15 | margin: 0; 16 | padding: 0; 17 | border: 0; 18 | font-size: 100%; 19 | font: inherit; 20 | vertical-align: baseline; 21 | } 22 | /* HTML5 display-role reset for older browsers */ 23 | article, aside, details, figcaption, figure, 24 | footer, header, hgroup, menu, nav, section { 25 | display: block; 26 | } 27 | body { 28 | line-height: 1; 29 | } 30 | ol, ul { 31 | list-style: none; 32 | } 33 | blockquote, q { 34 | quotes: none; 35 | } 36 | blockquote:before, blockquote:after, 37 | q:before, q:after { 38 | content: ''; 39 | content: none; 40 | } 41 | table { 42 | border-collapse: collapse; 43 | border-spacing: 0; 44 | } 45 | 46 | /* Remove Float */ 47 | .clear { display:block; height:0; overflow:hidden; clear:both; } 48 | .clearfix:after { content:'\20'; display:block; height:0; clear:both; } 49 | .clearfix { *zoom:1; } 50 | 51 | /* common */ 52 | body { font-size: 14px; line-height: 1.6; color: #333; font-family:"Microsoft Yahei", Arial; 53 | background: #2f7bb6; 54 | background: -webkit-gradient( linear, 0 50%, 100% 50%, color-stop(0.15,#5a69b4), color-stop(0.5,#2d7cb6), color-stop(1,#bb73bf ) ); 55 | background: -moz-linear-gradient( left, #5a69b4, #2d7cb6 , #bb73bf ); 56 | background: -o-linear-gradient( left, #5a69b4, #2d7cb6 , #bb73bf ); 57 | -webkit-user-select: none; 58 | -moz-user-select: none; 59 | } 60 | .menu .menu-list div ul li a { 61 | -webkit-transition: all .3s; 62 | -moz-transition: all .3s; 63 | -o-transition: all .3s; 64 | transition: all .3s; 65 | } 66 | .wrapper { width: 1000px; margin: 100px auto; border-radius: 5px; border: 1px solid #DDD; box-shadow: 0px 0px 20px rgba(0, 0, 0, .5); background: #FFF; } 67 | .wrapper .wrapper-inner { padding: 50px 30px; } 68 | .wrapper h1 small { font-size: 18px; } 69 | .wrapper h1 { 70 | padding:10px 0px 10px; 71 | text-align:center; 72 | font-size:48px; 73 | font-weight: 700; 74 | font-family:"Sacramento", Microsoft Yahei; 75 | -webkit-transition: all 1s 0s ease-in-out; 76 | -moz-transition: all 1s 0s ease-in-out; 77 | -o-transition: all 1s 0s ease-in-out; 78 | transition: all 1s 0s ease-in-out; 79 | -webkit-transform: translateY(-150px); 80 | -moz-transform: translateY(-150px); 81 | -o-transform: translateY(-150px); 82 | transform: translateY(-150px); 83 | -webkit-transform-origin: 50% 50%; 84 | -moz-transform-origin: 50% 50%; 85 | -o-transform-origin: 50% 50%; 86 | transform-origin: 50% 50%; 87 | } 88 | .wrapper h1.color { 89 | color: transparent; 90 | background: -webkit-gradient( linear, 0 20%, 65% 50%, color-stop(0.15,#5a69b4), color-stop(0.5,#2d7cb6), color-stop(1,#bb73bf ) ); 91 | -webkit-background-clip: text; 92 | } 93 | .wrapper h1.done{ 94 | -webkit-transform: translateY(0px) !important; 95 | -moz-transform: translateY(0px) !important; 96 | -o-transform: translateY(0px) !important; 97 | transform: translateY(0px) !important; 98 | } 99 | 100 | /* warning */ 101 | .warning { display:none; text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.2 ); height:30px; line-height:30px; text-align:center; box-shadow: 0px 2px 5px rgba( 0, 0, 0, 0.5 ); background:#FCD746; color:#f92672; } 102 | 103 | /* Desc */ 104 | .desc { text-align: center; padding: 10px 0px 5px; margin: 0px 0px 15px; } 105 | 106 | /* menu */ 107 | .nav { height:375px; } 108 | .menu { padding: 5px 0px; background:#FFF; } 109 | .menu .breadcrumb { position:relative; font-size: 20px; border-bottom: 1px solid #DDD; } 110 | .menu .breadcrumb a { float: right; text-decoration: none; color:#4183C4; font-size:16px; } 111 | .menu .breadcrumb span { position:absolute; left:105px; top:50%; margin-top:-4px; width:0px; height:0px; overflow:hidden; line-height:0; font-size:0; border-bottom:none; border-top:6px solid #666; border-left:6px solid #FFF; border-right:6px solid #FFF; } 112 | .menu .menu-list { padding:20px 0px; -webkit-animation:menu-fadeIn .5s; animation:menu-fadeIn .5s; } 113 | .menu .menu-list div { float:left; width:24.89%; border-right:1px solid #DDD; } 114 | .menu .menu-list div.last { border:none; } 115 | .menu .menu-list div h3 { text-align:center; font-weight: bold; } 116 | .menu .menu-list div ul { height:279px; padding-left:10px; } 117 | .menu .menu-list div ul li { float:left; width:49.5%; margin-top:5px; font-size: 12px; height:26px; line-height:26px; text-align:center; } 118 | .menu .menu-list div ul.options { padding:0px; } 119 | .menu .menu-list div ul.options li { width:33.3%; *width:33%; } 120 | .menu .menu-list div ul li.line { float:none; clear:both; width:80%; margin:0px auto; padding:2px 0px; border-bottom:1px solid #DDD; } 121 | .menu .menu-list div ul li a { text-decoration: none; color:#4183C4; } 122 | .menu .menu-list div ul li a:hover { text-decoration:underline; } 123 | 124 | .menu.fixed { position:fixed; top:0px; left:0px; width:100%; z-index:20; min-width:1000px; box-shadow:0px 3px 8px rgba(0, 0, 0, 0.5); } 125 | .menu.fixed .breadcrumb { padding:0px 20px; border-bottom:none; } 126 | .menu.fixed .breadcrumb span { left:125px; } 127 | .menu.fixed .menu-list { display:none; border-top:1px solid #DDD; } 128 | 129 | @keyframes menu-fadeIn { 130 | 0% { opacity:0; } 131 | } 132 | 133 | @-webkit-keyframes menu-fadeIn { 134 | 0% { opacity:0; } 135 | } 136 | 137 | .wrapper h2 { border-bottom:1px solid #DDD; padding:3px 0px; } 138 | .wrapper h2 strong { display:inline-block; padding:0px 5px 0px 0px; font-size:20px; } 139 | .wrapper h2 span { position:relative; top:-3px; width:0px; height:0px; overflow:hidden; line-height:0; font-size:0; border-bottom:none; border-top:6px solid #666; border-left:6px solid #FFF; border-right:6px solid #FFF; } 140 | 141 | /* code */ 142 | .box { padding:10px; } 143 | .box h3 { font-size:16px; line-height:30px; font-weight:bold; } 144 | .box h3 span { display:inline-block; padding:0px 15px; font-size:12px; font-weight:normal; } 145 | .box p { font-family:"consolas", Microsoft Yahei, Airal; margin:20px 0px 0px; } 146 | .box p span { display:inline-block; border-radius: 5px; border:1px solid #CCC; padding:5px; background:#f7f7f7; } 147 | .box p strong { font-weight: bold; } 148 | .box p span a { color:#2f7bb6; } 149 | .box pre { border-radius:5px; margin:10px 0px; display:block; padding:10px 10px; background:#f7f7f7; overflow-x:auto; color:#333; font-family:"consolas", Microsoft Yahei, Airal; -webkit-user-select: auto; -moz-user-select: auto; border: 1px solid #DDD; } 150 | .box button { border-radius:2px; padding:5px 10px; background:#2f7bb6; color:#FFF; border:none; box-shadow:2px 2px 1px rgba(0, 0, 0, 0.3); cursor:pointer; outline: none; } 151 | .box button:active { box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.3); } 152 | 153 | /* tab */ 154 | .tab { padding:0; border-collapse:collapse; margin: 10px 0px 20px; width:100%; } 155 | .tab tr { border-top: 1px solid #cccccc; background-color:#FFF; margin:0px; padding:0px; } 156 | .tab tr:nth-child(2n) { background-color: #f8f8f8; } 157 | .tab th { font-weight:bold; border:1px solid #cccccc; text-align:left; margin:0; padding:6px 13px;} 158 | .tab td { border:1px solid #cccccc; text-align:left; margin:0; padding:6px 13px; } 159 | .tab td span { color:#B50000; padding:0px 5px; } 160 | .tab th :first-child, td :first-child { margin-top:0; } 161 | .tab th :last-child, td :last-child { margin-bottom:0; } 162 | 163 | .desc-text p { line-height:160%; margin:10px 0px 0px; } 164 | 165 | .backtop { display:none; position:fixed; right:40px; bottom:40px; padding:10px 5px; border:1px solid #DDD; color:#555; background:#FFF; width:26px; text-align:center; border-radius:2px;line-height:1.4; text-decoration:none; -webkit-animation:menu-fadeIn .5s; animation:menu-fadeIn .5s; } 166 | .backtop:hover{ background:#f3f3f3; text-decoration:none; } -------------------------------------------------------------------------------- /MDialog.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * M.Dialog 2.2.0 3 | * Date: 2014-07-10 4 | * Update: 2014-11-30 5 | * (c) 2014-2014 M.J, http://webjyh.com 6 | * 7 | * This is licensed under the GNU LGPL, version 2.1 or later. 8 | * For details, see: http://creativecommons.org/licenses/LGPL/2.1/ 9 | */ 10 | (function(b){var c=b;var a=c.document;var d=function(e){return new d.fn.init(e)};d.version="2.2.0";d.fn=d.prototype={init:function(e){var g,f;this.IE6=!-[1]&&!c.XMLHttpRequest;this.closeBoolean=false;this.iframeId=null;this.top=null;this.config=this._cover(e,d.defaults);(c.MDialog.zIndex>=this.config.zIndex)?c.MDialog.zIndex=c.MDialog.zIndex+2:c.MDialog.zIndex=this.config.zIndex;if(this.config.id){f=a.getElementById(this.config.id);if(f){return false}}this.DOM=g=this._createDOM();g._body()._css({width:this.config.width,height:this.config.height});g._content()._padding(this.config.padding);g._footer()._hide();g._title()._css("cursor",this.config.drag?"move":"auto");if(this.config.lock){this._createLock()}g._wrap()._show();this._title(this.config.title)._content(this.config.content)._statusbar(this.config.statusbar)._button(this.config.button)._position(this.config.top,this.config.left)._addEvent();if(typeof this.config.init=="function"){this.config.init.call(this)}},title:function(e){this._title(e);this._position(this.config.top,this.config.left,true);return this},untitle:function(f){var e=this.DOM;this.config.untitle=true;f&&(this.config.unclose=true);this._title(this.config.title);this._position(this.config.top,this.config.left,true);return this},content:function(e){this._content(e);this._position(this.config.top,this.config.left,true);return this},statusbar:function(e){this._statusbar(e);this._position(this.config.top,this.config.left,true);return this},time:function(e){var f=this;setTimeout(function(){f._closeEvent(f.config.close)},e*1000);return this},close:function(e){if(typeof e=="function"){this.config.close=e}this._closeEvent(this.config.close);return this},lock:function(){var e=this.DOM,f=this;if(!this.config.lock){this.config.lock=true;this._createLock();e._lock()._bind("dblclick",function(){f._closeEvent(f.config.close)})}return this},unlock:function(){var e=this.DOM;if(this.config.lock){if(this.config.lock){a.body.removeChild(e._lock()[0])}this.config.lock=false}return this},width:function(e){this.config.width=e;this._size("width",e);return this},height:function(e){this.config.height=e;this._size("height",e);return this},padding:function(f){var e=this.DOM;this.config.padding=f;e._content()._padding(f);this._position(this.config.top,this.config.left,true);return this},position:function(g,f){var h,e;h=(typeof g=="number")?g+"px":g;e=(typeof f=="number")?f+"px":f;this.config.top=h;this.config.left=e;this._position(this.config.top,this.config.left,true);return this},button:function(e){if(this._isArray(e)){this._button(e);this._position(this.config.top,this.config.left,true)}return this},msg:function(f){var e=this.DOM;this.config.untitle=true;this.config.unclose=true;this.config.fixed=true;this.config.padding="10px 15px";this.config.top="50%";e._content()._addClass("ui-MDialog-msg");e._content()._padding(this.config.padding);e._footer()._hide();this._title(this.config.title);this._content(f);this._position(this.config.top,this.config.left,true);return this},_cover:function(e,g){var f,e=e||{};for(f in g){if(e[f]===undefined){e[f]=g[f]}}return e},_title:function(f){var e=this.DOM;e._title()._text(f);if(this.config.untitle){e._title()._hide();e._close()._addClass("untitle");this.config.drag=false}this.config.unclose&&e._close()._hide();return this},_content:function(f){var e=this.DOM;if(this.config.iframe){this._createIframe(f)}else{e._content()._html(f)}return this},_statusbar:function(f){var e=this.DOM;if(f!=null){e._footer()._show();e._statusbar()._html(f)}return this},_button:function(e){var f=e||[],h=["name","callback","focus","disabled"];var g=function(j){var l={};for(var k=0;kk)?f+"px":k+"px",l='',g=c.MDialog.zIndex-1;h.className="ui-MDialog-lock";if(this.IE6){h.innerHTML=l}a.body.appendChild(h);j._lock=this._sizzle(h);j._lock()._css({position:"absolute",top:"0px",left:"0px",width:"100%",height:e,backgroundColor:this.config.background,opacity:this.config.opacity,zIndex:g});return this},_createButton:function(e){var j=this.DOM,l=this,h=0,f=e.length;for(;hLoading...

';f._content()._html(e);e=f._content()[0].getElementsByTagName("iframe")[0];g=f._content()[0].getElementsByTagName("p")[0];g.style.display="block";this._sizzle(e)()._bind("load",function(){e.style.display="block";g.style.display="none";f._title()._text(j.config.title);f._body()._removeClass("ui-MDialog-loading");var l;try{l=a.getElementById(j.iframeId).contentWindow.document}catch(k){}if(l){outWidth=(j.config.width!="auto")?j.config.width:l.documentElement.scrollWidth+"px",outHeight=(j.config.height!="auto")?j.config.height:l.documentElement.scrollHeight+"px";f._body()._css({width:"auto",height:"auto"});f._content()._css({width:outWidth,height:outHeight})}else{f._body()._css({width:"auto",height:"auto"});f._content()._css({width:j.config.width,height:j.config.height})}j._position(j.config.top,j.config.left,true);if(typeof j.config.oniframeload=="function"){j.config.oniframeload.call(j,l)}})},_position:function(n,h,g){var s=this.DOM,j=a.documentElement.clientWidth,l=a.documentElement.clientHeight,r=a.documentElement.scrollHeight,f=c.pageYOffset||a.documentElement.scrollTop||a.body.scrollTop,q=n.toString().indexOf("%"),m=h.toString().indexOf("%"),t,p,k,e;(this.IE6)?s._wrap()._css("position","absolute"):s._wrap()._css("position",(this.config.fixed)?"fixed":"absolute");k=parseInt(s._wrap()._getCurrentStyle("width"));e=parseInt(s._wrap()._getCurrentStyle("height"));var o=function(u,x,w){var v=(x*(u/100))-(w/2);if(v>(x-w)){return x-w}return v};t=(m>-1)?o(parseInt(h),j,k)+"px":h;p=(q>-1)?o(parseInt(n),l,e)+"px":n;if(!this.config.fixed&&r>l){p=parseInt(p)+f+"px"}this.top=p;if(this.IE6&&this.config.fixed){p=parseInt(p)+f+"px"}s._wrap()._css({left:t,top:p});if(!g){s._wrap()._css("zIndex",c.MDialog.zIndex)}return this},_sizzle:function(f){var e=this;return function(){e[0]=f;return e}},_closeEvent:function(g){var f=this,e=this.DOM;if(!this.closeBoolean){a.body.removeChild(e._wrap()[0]);if(this.config.lock){a.body.removeChild(e._lock()[0])}if(typeof g==="function"){g.call(this)}}if(this.config.iframe){delete d.iframeData[this.iframeId]}this.closeBoolean=true;delete d;return this},_fixedEvent:function(){var e=this.DOM,g=b.pageYoffset||a.documentElement.scrollTop||a.body.scrollTop,f=parseFloat(this.top);e._wrap()._css("top",(g+f)+"px");return this},_focusEvent:function(){var e=this.DOM;c.MDialog.zIndex=c.MDialog.zIndex+2;e._wrap()._css("zIndex",c.MDialog.zIndex);return this},_resize:function(){if(this.config.lock){var f=a.documentElement.clientHeight,h=a.documentElement.scrollHeight,e=(f>h)?f+"px":h+"px",g=this.DOM;if(g._lock()){g._lock()._css("height",e)}}this._position(this.config.top,this.config.left,true);return this},_drag:function(){var p=this.DOM,j=this.config.fixed,l=this.IE6,g=this._sizzle(a),k=0,e=0,o=0,n=0;var f=function(q){var q=q||b.event,z=q.clientX-o,w=q.clientY-n,s=a.documentElement.scrollHeight,A=a.documentElement.clientHeight,u=a.documentElement.clientWidth-k,t=(j&&!l)?A:((A>s)?A:s),t=t-e,r,v;r=(z<0)?0:(z>=0&&z<=u)?z:u;v=(w<0)?0:(w>=0&&w<=t)?w:t;p._wrap()._css({left:r+"px",top:v+"px"})};var m=function(){g()._unbind("mousemove",f)};var h=function(r){var r=r||b.event,s=parseFloat(p._wrap()._getCurrentStyle("top")),q=parseFloat(p._wrap()._getCurrentStyle("left"));o=r.clientX-q;n=r.clientY-s;k=parseInt(p._wrap()._getCurrentStyle("width"));e=parseInt(p._wrap()._getCurrentStyle("height"));g()._bind("mousemove",f);g()._bind("mouseup",m)};p._header()._bind("mousedown",h);return this},_getCurrentStyle:function(f){var g,h,e,j=this[0];if("defaultView" in a&&"getComputedStyle" in a.defaultView){g=a.defaultView.getComputedStyle(j,false)[f]}else{if(f=="width"||f=="height"){var k=j.getBoundingClientRect(),h=k.right-k.left,e=k.bottom-k.top;(f=="width")?g=h:g=e}else{g=j.currentStyle[f]}}return g},_css:function(e,h){var f="",g=this[0],j=arguments[0];if(typeof e==="string"){if(typeof h!==undefined){(e=="opacity")?this._opacity(h):g.style[e]=h}}else{for(i in j){(i=="opacity")?this._opacity(j[i]):g.style[i]=j[i]}}return this},_padding:function(e){if(typeof e==="string"){this._css("padding",e)}else{this._css("padding",e+"px")}return this},_size:function(e,h){var g,f=this.DOM;(typeof h=="string")?g=h:g=h+"px";f._body()._css(e,g);this._position(this.config.top,this.config.left,true);return this},_opacity:function(g){var e=this[0],f="opacity" in a.documentElement.style;if(typeof g!==undefined){f?e.style.opacity=g:e.style.filter="Alpha(opacity="+g*100+")"}return this},_addClass:function(e){var g=this[0],f=g.className.replace(/^\s+|\s+$/g,"");g.className=f+" "+e;return this},_removeClass:function(e){var g=this[0],f=g.className.replace(e,"").replace(/^\s+|\s+$/g,"");g.className=f;return this},_show:function(){this._css("display","block");return this},_hide:function(){this._css("display","none");return this},_text:function(f){var e=this[0];if(a.all){e.innerText=f}else{e.textContent=f}return this},_html:function(e){var f=this[0];f.innerHTML="";if(e.nodeType&&e.nodeType==1){f.appendChild(e)}if(e.nodeType&&e.nodeType==3||typeof e=="string"){f.innerHTML=e}return this},_isArray:function(e){return Object.prototype.toString.call(e)==="[object Array]"},_bind:function(e,f){var g=this[0];if(g.addEventListener){g.addEventListener(e,f,false)}else{g.attachEvent("on"+e,f)}return this},_unbind:function(e,f){var g=this[0];if(g.removeEventListener){g.removeEventListener(e,f,false)}else{g.detachEvent("on"+e,f)}return this}};d.fn.init.prototype=d.fn;d.iframeData={};d.getIframe=function(e){if(!e){return false}return d.iframeData[e]};d.templates='
x
';d.defaults={title:"\u6d88\u606f",untitle:false,content:"Loading....",statusbar:null,init:null,close:null,unclose:false,width:"auto",height:"auto",padding:"20px 15px",lock:false,background:"#000",opacity:0.3,fixed:false,esc:true,time:null,left:"50%",top:"38.2%",zIndex:1992,id:null,ok:null,cancel:null,okVal:"\u786e\u5b9a",cancelVal:"\u53d6\u6d88",button:null,resize:true,data:null,iframe:false,oniframeload:null,drag:true};if(typeof define==="function"&&define.amd){define("MDialog",[],function(){return d})}c.MDialog=$M=d}(window)); -------------------------------------------------------------------------------- /MDialog.js: -------------------------------------------------------------------------------- 1 | /** 2 | * M.Dialog 2.2.0 3 | * Date: 2014-07-10 4 | * Update: 2014-11-30 5 | * (c) 2014-2014 M.J, http://webjyh.com 6 | * 7 | * This is licensed under the GNU LGPL, version 2.1 or later. 8 | * For details, see: http://creativecommons.org/licenses/LGPL/2.1/ 9 | * 10 | */ 11 | (function( window ){ 12 | 13 | //传入 window 全局变量进来 14 | //使全局变量变成局部变量，使得查找变量更快 15 | //方便代码压缩，从而不影响使用 16 | var win = window; 17 | var document = win.document; 18 | 19 | //构造函数，使得每次初始化不需要使用 new 20 | var MDialog = function( options ){ 21 | return new MDialog.fn.init( options ); 22 | }; 23 | 24 | //全局 Data 25 | MDialog.version = '2.2.0'; 26 | 27 | //扩展原型，使上面返回的 new 对象 继承以下方法和属性。 28 | MDialog.fn = MDialog.prototype = { 29 | 30 | /** 31 | * @access Public 32 | * @name 初始化插件 33 | * @param options {Object} 插件参数 34 | * @return {this} 35 | */ 36 | init: function( options ){ 37 | var DOM, elem; 38 | 39 | //全局 40 | //this.closeBoolean 修正多处关闭事件从而导致的问题 41 | //this.top 修正IE下 FixedEvent Top 值问题 42 | this.IE6 = !-[1,] && !win.XMLHttpRequest; 43 | this.closeBoolean = false; 44 | this.iframeId = null; 45 | this.top = null; 46 | 47 | 48 | //默认配置项合并 49 | this.config = this._cover( options, MDialog.defaults ); 50 | ( win.MDialog.zIndex >= this.config.zIndex ) ? win.MDialog.zIndex = win.MDialog.zIndex + 2 : win.MDialog.zIndex = this.config.zIndex; 51 | 52 | //检测是否重复设置弹窗ID 53 | if ( this.config.id ){ 54 | elem = document.getElementById( this.config.id ); 55 | if ( elem ){ 56 | return false; 57 | } 58 | } 59 | 60 | //创建 MDialog Element 61 | this.DOM = DOM = this._createDOM(); 62 | 63 | //设置CSS 64 | DOM._body()._css({ 'width': this.config.width, 'height': this.config.height }); 65 | DOM._content()._padding( this.config.padding ); 66 | DOM._footer()._hide(); 67 | DOM._title()._css( 'cursor', this.config.drag ? 'move' : 'auto' ); 68 | 69 | if ( this.config.lock ) this._createLock(); 70 | DOM._wrap()._show(); 71 | 72 | //初始化 73 | this 74 | ._title( this.config.title ) 75 | ._content( this.config.content ) 76 | ._statusbar( this.config.statusbar ) 77 | ._button( this.config.button ) 78 | ._position( this.config.top, this.config.left ) 79 | ._addEvent(); 80 | 81 | //弹窗初始化后的回调函数 82 | if ( typeof this.config.init == 'function' ) this.config.init.call( this ); 83 | }, 84 | 85 | /** 86 | * @access Public 87 | * @name 设置标题文字 并调整弹窗位置 88 | * @param text {String} 设置标题 89 | * @return {this} 90 | */ 91 | title: function( text ){ 92 | this._title( text ); 93 | this._position( this.config.top, this.config.left, true ); 94 | return this; 95 | }, 96 | 97 | /** 98 | * @access Public 99 | * @name 设置是否隐藏标题, 并是否显示关闭按钮 100 | * @param val {Boolean} 是否显示关闭按钮 101 | * @return {this} 102 | */ 103 | untitle: function( val ){ 104 | var DOM = this.DOM; 105 | this.config.untitle = true; 106 | val && ( this.config.unclose = true ); 107 | this._title( this.config.title ); 108 | this._position( this.config.top, this.config.left, true ); 109 | return this; 110 | }, 111 | 112 | /** 113 | * @access Public 114 | * @name 设置弹窗内容 并调整弹窗位置 115 | * @param {Element} 设置内容 116 | * @return {this} 117 | */ 118 | content: function( msg ){ 119 | this._content( msg ); 120 | this._position( this.config.top, this.config.left, true ); 121 | return this; 122 | }, 123 | 124 | /** 125 | * @access Public 126 | * @name 对话框左下脚添加复选框 并调整弹窗位置 127 | * @param {Element} 设置内容 128 | * @return {this} 129 | */ 130 | statusbar: function( msg ){ 131 | this._statusbar( msg ); 132 | this._position( this.config.top, this.config.left, true ); 133 | return this; 134 | }, 135 | 136 | /** 137 | * @access Public 138 | * @name 设置自动关闭弹窗 139 | * @example {time} {int} 140 | * @return {this} 141 | */ 142 | time: function( time ){ 143 | var _this = this; 144 | setTimeout( function(){ _this._closeEvent( _this.config.close ); }, time * 1000 ); 145 | return this; 146 | }, 147 | 148 | /** 149 | * @access Public 150 | * @name 关闭弹窗对外接口 151 | * @example this.close(); 152 | * @return {this} 153 | */ 154 | close: function( callback ){ 155 | if ( typeof callback == 'function' ){ 156 | this.config.close = callback; 157 | } 158 | this._closeEvent( this.config.close ); 159 | return this; 160 | }, 161 | 162 | /** 163 | * @access Public 164 | * @name 增加锁屏 165 | * @example this.lock(); 166 | * @return {this} 167 | */ 168 | lock: function(){ 169 | var DOM = this.DOM, 170 | _this = this; 171 | if ( !this.config.lock ){ 172 | this.config.lock = true; 173 | this._createLock(); 174 | DOM._lock()._bind('dblclick', function(){ _this._closeEvent( _this.config.close ); }); 175 | } 176 | return this; 177 | }, 178 | 179 | /** 180 | * @access Public 181 | * @name 解除锁屏 182 | * @example this.unlock(); 183 | * @return {this} 184 | */ 185 | unlock: function(){ 186 | var DOM = this.DOM; 187 | if ( this.config.lock ){ 188 | if ( this.config.lock ) document.body.removeChild( DOM._lock()[0] ); 189 | this.config.lock = false; 190 | } 191 | return this; 192 | }, 193 | 194 | /** 195 | * @access Public 196 | * @name 设置容器宽度,并重新调整弹窗位置 197 | * @example this.width( 300 || '20em' ); 198 | * @return {this} 199 | */ 200 | width: function( val ){ 201 | this.config.width = val; 202 | this._size( 'width', val ); 203 | return this; 204 | }, 205 | 206 | /** 207 | * @access Public 208 | * @name 设置容器高度,并重新调整弹窗位置 209 | * @example this.height( 300 || '20em' ); 210 | * @return {this} 211 | */ 212 | height: function( val ){ 213 | this.config.height = val; 214 | this._size( 'height', val ); 215 | return this; 216 | }, 217 | 218 | /** 219 | * @access Public 220 | * @name 设置容器padding，并重新调整弹窗位置 221 | * @example this.padding( 0 || '10px 20px' ); 222 | * @return {this} 223 | */ 224 | padding: function( val ){ 225 | var DOM = this.DOM; 226 | this.config.padding = val; 227 | DOM._content()._padding( val ); 228 | this._position( this.config.top, this.config.left, true ); 229 | return this; 230 | }, 231 | 232 | /** 233 | * @access Public 234 | * @name 设置弹窗 top, left 位置 235 | * @example this.left( 100, 100 ); 236 | * @return {this} 237 | */ 238 | position: function( top, left ){ 239 | var _top, _left; 240 | _top = ( typeof top == 'number' ) ? top + 'px' : top; 241 | _left = ( typeof left == 'number' ) ? left + 'px' : left; 242 | 243 | this.config.top = _top; 244 | this.config.left = _left; 245 | 246 | this._position( this.config.top, this.config.left, true ); 247 | return this; 248 | }, 249 | 250 | /** 251 | * @access Public 252 | * @name 增加一个新的按钮, 并调整位置 253 | * @example this.button( [{name:'按钮文字', callback:function(){ console.log('按下执行的函数') }, focus:true, disabled:true }] ); 254 | * @return {this} 255 | */ 256 | button: function( arr ){ 257 | if ( this._isArray( arr ) ){ 258 | this._button( arr ); 259 | this._position( this.config.top, this.config.left, true ); 260 | } 261 | return this; 262 | }, 263 | 264 | /** 265 | * @access Public 266 | * @name 一个简单的提示信息 267 | * @example this.msg( '欢迎使用 MDialog 对话框！' ); 268 | * @return {this} 269 | */ 270 | msg: function( msg ){ 271 | var DOM = this.DOM; 272 | 273 | this.config.untitle = true; 274 | this.config.unclose = true; 275 | this.config.fixed = true; 276 | this.config.padding = '10px 15px'; 277 | this.config.top = '50%'; 278 | 279 | DOM._content()._addClass('ui-MDialog-msg'); 280 | DOM._content()._padding( this.config.padding ); 281 | DOM._footer()._hide(); 282 | 283 | this._title( this.config.title ); 284 | this._content( msg ); 285 | this._position( this.config.top, this.config.left, true ); 286 | return this; 287 | }, 288 | 289 | /** 290 | * @access Private 291 | * @name 将默认配置和选项合并 292 | * @param options {Object} 默认用户的参数 293 | * @return {Object} 294 | */ 295 | _cover: function( options, defaults ){ 296 | var i, options = options || {}; 297 | for ( i in defaults ){ 298 | if ( options[i] === undefined ) options[i] = defaults[i]; 299 | } 300 | return options; 301 | }, 302 | 303 | /** 304 | * @access Private 305 | * @name 设置标题文字 306 | * @param text {String} 307 | * @return {this} 308 | */ 309 | _title: function( text ){ 310 | var DOM = this.DOM; 311 | DOM._title()._text( text ); 312 | if ( this.config.untitle ){ 313 | DOM._title()._hide(); 314 | DOM._close()._addClass('untitle'); 315 | this.config.drag = false; 316 | } 317 | this.config.unclose && DOM._close()._hide(); 318 | return this; 319 | }, 320 | 321 | /** 322 | * @access Private 323 | * @name 设置弹窗内容 324 | * @param {msg} {Element} 325 | * @return {this} 326 | */ 327 | _content: function( msg ){ 328 | var DOM = this.DOM; 329 | if ( this.config.iframe ){ 330 | this._createIframe( msg ); 331 | } else { 332 | DOM._content()._html( msg ); 333 | } 334 | return this; 335 | }, 336 | 337 | /** 338 | * @access Private 339 | * @name 对话框左下脚添加复选框 340 | * @param {Element} 设置内容 341 | * @return {this} 342 | */ 343 | _statusbar: function( msg ){ 344 | var DOM = this.DOM; 345 | if ( msg != null ){ 346 | DOM._footer()._show(); 347 | DOM._statusbar()._html( msg ); 348 | } 349 | return this; 350 | }, 351 | 352 | /** 353 | * @access Private 354 | * @name 设置弹窗按钮 355 | * @param {arr} {Array} 356 | * @return {this} 357 | */ 358 | _button: function( arr ){ 359 | var _arr = arr || [], 360 | _obj = ['name', 'callback', 'focus', 'disabled']; 361 | 362 | var getObj = function( arr ){ 363 | var obj = {}; 364 | for ( var i=0; i<_obj.length; i++ ){ 365 | obj[_obj[i]] = arr[i]; 366 | } 367 | return obj; 368 | }; 369 | 370 | if ( this.config.cancel != null ){ 371 | _arr.unshift( getObj( [this.config.cancelVal, this.config.cancel, false, false ]) ); 372 | } 373 | 374 | if ( this.config.ok != null ){ 375 | _arr.unshift( getObj( [this.config.okVal, this.config.ok, true, false ]) ); 376 | } 377 | 378 | this._createButton( _arr ); 379 | 380 | return this; 381 | }, 382 | 383 | /** 384 | * @access Private 385 | * @name 绑定元素事件 386 | * @param event 387 | * @return {this} 388 | */ 389 | _addEvent: function(){ 390 | var DOM = this.DOM, 391 | _this = this, 392 | _domElem = this._sizzle( document ), 393 | _winElem = this._sizzle( win ); 394 | 395 | //关闭弹窗事件 396 | DOM._close()._bind('click', function(){ _this._closeEvent( _this.config.close ); }); 397 | if ( this.config.lock ) DOM._lock()._bind('dblclick', function(){ _this._closeEvent( _this.config.close ); }); 398 | 399 | //IE6 下Fixed 定位问题 400 | if ( this.config.fixed && this.IE6 ){ 401 | _winElem()._bind( 'scroll', function(){ _this._fixedEvent(); }); 402 | } 403 | 404 | //设置焦点事件 405 | DOM._wrap()._bind('mousedown', function(){ _this._focusEvent(); }); 406 | DOM._header()._bind('mousedown', function(){ DOM._wrap()._addClass( 'ui-MDialog-focus' ); }); 407 | DOM._wrap()._bind('mouseup', function(){ DOM._wrap()._removeClass( 'ui-MDialog-focus' ); }); 408 | 409 | //自动关闭弹窗 410 | if ( this.config.time ){ 411 | this.time( this.config.time ); 412 | } 413 | 414 | //绑定ESC键盘事件 415 | if ( this.config.esc ){ 416 | _domElem()._bind( 'keydown', function( event ){ 417 | var event = event || window.event, 418 | which = event.which || event.keyCode; 419 | 420 | if ( which == 27 ){ 421 | _this._closeEvent( _this.config.close ); 422 | } 423 | }); 424 | } 425 | 426 | //绑定resize事件 427 | if ( this.config.resize ) _winElem()._bind( 'resize', function(){ _this._resize(); } ); 428 | 429 | //绑定拖拽事件 430 | if ( this.config.drag ) this._drag(); 431 | 432 | return this; 433 | 434 | }, 435 | 436 | /** 437 | * @access Private 438 | * @name 将 Templates 插入到 DOM 中，并将元素保存在DOM中。 439 | * @param {Null} 440 | * @return {this} 441 | */ 442 | _createDOM: function(){ 443 | var tpl = document.createElement('div'); 444 | 445 | //TPL 操作 446 | tpl.innerHTML = MDialog.templates; 447 | tpl.className = 'ui-MDialog-wrap'; 448 | if ( this.config.id ) tpl.setAttribute( 'id', this.config.id ); 449 | 450 | document.body.appendChild(tpl); 451 | 452 | var DOM = { _wrap : this._sizzle( tpl ) }, 453 | i = 0, 454 | elem = tpl.getElementsByTagName('*'); 455 | elemLen = elem.length; 456 | 457 | //遍历 TPL 所有元素，取得所需的元素 458 | for ( ; i < elemLen; i++ ){ 459 | var name = elem[i].className.replace('ui-MDialog-', ''); 460 | if ( name ) DOM['_'+name] = this._sizzle( elem[i] ); 461 | } 462 | 463 | return DOM; 464 | }, 465 | 466 | /** 467 | * @access Private 468 | * @name 创建锁屏，并将元素添加到DOM中 469 | * @param {Null} 470 | * @return {this} 471 | */ 472 | _createLock: function(){ 473 | var DOM = this.DOM, 474 | tpl = document.createElement('div'), 475 | winHeight = document.documentElement.clientHeight, 476 | bodyHeight = document.documentElement.scrollHeight, 477 | height = ( winHeight > bodyHeight ) ? winHeight + 'px' : bodyHeight + 'px', 478 | IE6Select = '', 479 | index = win.MDialog.zIndex - 1; 480 | 481 | tpl.className = 'ui-MDialog-lock'; 482 | if ( this.IE6 ) tpl.innerHTML = IE6Select; 483 | 484 | document.body.appendChild( tpl ); 485 | DOM._lock = this._sizzle( tpl ); 486 | 487 | DOM._lock()._css({ 488 | 'position': 'absolute', 489 | 'top': '0px', 490 | 'left': '0px', 491 | 'width': '100%', 492 | 'height': height, 493 | 'backgroundColor': this.config.background, 494 | 'opacity': this.config.opacity, 495 | 'zIndex': index 496 | }); 497 | 498 | return this; 499 | }, 500 | 501 | /** 502 | * @access Private 503 | * @name 设置弹窗Button按钮集合。 504 | * @param {obj} {Object} 505 | * @example this._createButton( [{name:'按钮文字', callback:function(){ console.log('按下执行的函数') }, focus:true, disabled:true }] ) 506 | * @return {this} 507 | */ 508 | _createButton: function( arr ){ 509 | var DOM = this.DOM, 510 | _this = this, 511 | i = 0, 512 | arrLen = arr.length; 513 | 514 | for ( ; i