# 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