# btn-dialog --- 任何`A標簽` 或者 `button` 上如果需要點擊彈出新頁面，并且以`dialog` 的方式打開頁面。只需在class中加上 `btn-dialog`即可。 ```html <a class="btn btn-danger btn-dialog" title="百度" href="http://www.baidu.com">按鈕1</a> <button class="btn btn-danger btn-dialog" title="百度" data-area="70%,60%" data-url="http://www.baidu.com">按鈕2</button> ``` 按鈕1點擊效果 ![dialog1] 按鈕2點擊效果 ![dialog2] >[danger] `按鈕1`和`按鈕2`區別為`按鈕1`為`a標簽` `按鈕2`是`button`，這時候需要設置`data-url`屬性。 > `按鈕2`還設置了顯示的寬高。 #### 支持的屬性列表 屬性 | 意義 ---|--- `title` 或者 `data-title` | 標題 ,如果不設置，則不顯示標題欄 `href` 或者 `data-url` | 連接地址，這個必須有 `data-intop` | 是否在最頂端打開，默認在本窗口打開 `data-area` | 設置寬高，默認 `100%,100%`,支持百分比和具體值 #### 其中 `data-intop` - 當`data-intop=1`時候，將在最外層頁面打開。 - 當`data-intop=0`時候，將在當前頁面中打開。 ```html <a class="btn btn-info btn-dialog" title="百度" data-intop="1" href="http://www.baidu.com">In top Dialog 1</a> <button class="btn btn-info btn-dialog" title="百度" data-intop="1" data-area="70%,60%" data-url="http://www.baidu.com">In top Dialog 2</button> ``` 效果分別如下： 默認寬度`100%`的 ![dialog4] 設置寬度的 ![dialog3] >[info] 在其它場景，如彈出框后點擊確定按鈕再彈出頁面。請參考后續章節。 [dialog1]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/dialog1.png [dialog2]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/dialog2.png [dialog3]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/dialog3.png [dialog4]:http://epii.gitee.io/static/project/epiiadmin-js/docimg/dialog4.png