基於bootstarp的Dailog

oaoDailog開發幫助

1. 1.         幫助文檔關鍵字

boostrap模態框oaoDailog

1. 2.         使用場景

當網頁上點擊某個按鈕需要給予用戶提示確認，用戶點擊確認按鈕才能繼續執行，或者用戶點擊取消按鈕則取消執行操作；

當網頁上點擊查看，展示的數據需要使用彈出框展示的情況下，可以使用oaoDailog

1. 3.         原理圖

基於boostrap3.0的modal，jquery1.9

1. 4.         使用說明

為什麼需要oaoDailog？

a.由於boostrap3.0提供的modal，必須要在頁面上先定義一個modal的div隱藏代碼，用戶將需要展示的內容寫到該div中，如果一個頁面有多種模態框，則需要寫多個隱藏的模態框div隱藏代碼，無疑這是多餘的。

b.由於預設的modal是沒有確認和取消按鈕的，當然我們可以寫兩個button在模態框的隱藏div中，但是我們同時需要寫js去監控確認按鈕點擊後執行的操作，同時確認按鈕執行的操作，跟彈出時用戶點擊的數據有關係，數據如何傳遞，bootstrap沒有給我們提供。

c. oaoDailog1.0.0版本主要就是解決bootstrap的模態框使用不方便，代碼冗餘的問題。

效果圖：

開始使用

1、  引入oaoDailog.js

Code:

<script type="text/javascript" src="${ctx}/static/jquery/jqueryApi/oaoDialog/oao.dialog.js" charset="UTF-8"></script>

2、  調用展示彈出框的代碼

Code:

     oao.dialog({

         title:"刪除提示框",

         content:"請確認是否真的刪除，刪除後將無法恢復!",

         ok:function(){

              oao.dialog.close();

         }

     });

         這就是一個基本也是使用最常見的確認彈出框的使用方法。

1. 5.         API

oao.dialog()：這個方法是生成彈出框的方法，傳入的參數是一個json對象，當然你也可以什麼都不傳，那樣會彈出一個空白的彈出框，這是沒有問題的。下麵分別介紹每個參數的意思以及預設值。

• oao.dialog.close():關閉模態框

1. 6.         待支持的功能
   1. 目前彈出框的內容只支持文字和靜態html，不支持url請求
   2. 目前最多只能顯示兩個按鈕，不支持自定義按鈕，後續支持
   3. 目前彈出框的位置和大小不支持自定義
   4. 目前的彈出框一次只能彈出一個，不支持彈出框中再彈出一個模態框(bootstrap modal底層不支持)

敬請期待，下個版本見。