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