彈出框插件——dialog


基於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:




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM