jQuery彈出層外掛popbox

呂大豹發表於2014-08-07
jQuery

　　都什麼年代了，還自己寫彈出層外掛！是的，①自己寫的自己好控制②可定製性高③相容低版本IE

　　本外掛有以下特性：

  1. 樣式分離，可定製，純淨無圖片
  2. 可自定義按鈕及按鈕的樣式、點選事件
  3. 可指定選擇器選擇頁面元素的內容作為彈出層的內容，也可以指定url來非同步載入單獨頁面
  4. 可配置遮罩層、關閉按鈕、按鈕欄
  5. 可配置拖動、自動關閉、失焦關閉
  6. 可配置開啟、關閉和確定、取消時的動作

　　先上一張截圖看看樣子：

      

使用方法：

1. 引入相關檔案

<link rel="stylesheet" href="jquery.popbox.css" />
<script src="jquery.min.js"></script>
<script src="jquery.popbox.js"></script>

2. 呼叫$.popbox();預設配置引數如下：

var defaults = {
            width : '666px', 
            maxHeight : '500px',  //body區域的最大高度
            padding : '20px',   //body區域的padding值
            title : '溫馨提示',  //標題
            content : '',  //主體內容，支援HTML標籤
            contentSelector : '',  //載入選擇器指定的元素的內容
            contentUrl : '',  //通過ajax載入單獨的頁面
            foot : '',  //底部內容
            showMask : true,  //是否顯示遮罩層
            showCloseBtn : true,  //是否顯示關閉按鈕
            btns : [
                {
                    type : 'ok',
                    text : '確定',
                    click : null
                },
                {
                    type : 'cancel',
                    text : '取消',
                    click : null
                }

            ], //預設顯示的按鈕，
            draggable : true,  //是否可拖動
            autoClose : 0, //是否自動關閉，否則設為0，是則設為大於0的數字，表示關閉時間，單位ms
            blurClose : false,  //點選視窗外部是否關閉視窗
            onOpen : null, //視窗載入完畢時的動作
            onClose : null,  //視窗關閉前的動作，返回false可組織視窗關閉
            onOk : null,  //點選確定按鈕
            onCancel : null,//點選取消按鈕
            showBtn : true,
            customPos : '' //自定義位置
        };

　　最後，附上下載地址：http://files.cnblogs.com/lvdabao/jquery.popbox-1.1.1.zip

相關文章