# 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
- 簡介/安裝
- 快速搭建一個用戶中心
- Js代碼寫在哪里
- 環境變量Args
- 前臺組件
- Dialog方式打開頁面
- Addtab方式打開頁面
- Alert提醒框
- Confirm確認框
- Prompt輸入框
- 表單Form
- 列表Table/list
- 基礎Table
- 控制Table
- 搜索Table
- 城市選擇city-picker
- 文件上傳組件
- 基礎版本
- 簡單版本
- 更多實用組件
- 后臺
- 實現方式綜述
- 命令管理類JsCmd
- 命令
- Alert命令
- Url命令
- Toast命令
- JsEval命令
- Close命令
- Refresh命令
- CloseAndRefresh命令
- 常用命令的簡化
- 文件上傳
- 后臺基礎
- 后臺進階
- 左側導航badge配置