基于jquery和dot.js彈出框插件,兼容IE6+等其他瀏覽器。
思想:彈出框元素插入body節(jié)點中,并在頁面垂直居中顯示(fixed定位),觸發(fā)確定和關(guān)閉事件綁定。
注意ie6包含兩個問題:
一、select、flash不能遮罩,采用iframe。
二、fixed屬性采用滾動時重新計算高度或在樣式中采用表達式計算expression。
源碼分析:
1、creatHtml:采用doT.js初始化元素添加到body中;
2、show:設(shè)置寬度,高度,居中顯示;
3、events:為關(guān)閉和確定綁定事件;
4、removeCallback:移出元素節(jié)點,如有執(zhí)行回調(diào)方法;
5、ie6fixed:ie6中fixed的兼容性處理。
參數(shù)使用說明:
width:定義彈出框的寬度,默認值是400。
height:定義彈出框的高度,默認值是100.
title:定義彈出框的標題,默認值是空。
html:定義彈出框的內(nèi)容,默認值是空。
type:定義彈出框的類型,默認值是default,其他conform和alert。
closed: 標題欄中的關(guān)閉按鈕,回調(diào)方法,默認為null。
conform:包含name指按鈕的名稱,默認值為確定,callback回調(diào)方法,默認值為null。
cancel:包含name指按鈕的名稱,默認值為取消,callback回調(diào)方法,默認值為null。
備注:如果使用conform或alert時,不設(shè)置type類型是不起作用。
放在頁面底部,作為公用部分:
使用方法:
$.Dialog.init({ height: 180 , title: "彈出框" , html: "親,默認彈出框哦" , closed: function () { alert( "關(guān)閉" ); } });
github地址:
https://github.com/benpaobenpao/dialog
DEMO:
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
