bricks/docs/cn/widgets/modal.md

79 lines
1.8 KiB
Markdown
Raw Permalink Normal View History

2024-05-11 17:58:28 +08:00
# modal
# 用法
```html
<html>
<head>
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Modal",
"options": {
"auto_close": true,
"auto_open": true,
"width": "700px",
"height": "400px",
"archor": "cl"
},
"subwidgets": [
{
"widgettype": "Text",
"options": {
"text": "This is a test"
}
}
]
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\modal.png)
# options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------------------------ | ------- | -------- | ---------- | ------ |
| auto_close | 点击弹窗以外的区域是否关闭弹窗 | Boolean | 是 | true/false | --- |
| auto_close | 是否默认打开弹窗 | Boolean | 是 | true/false | --- |
| width | 宽度 | String | 是 | 百分比 | --- |
| height | 高度 | String | 是 | 百分比 | --- |
| archor | 控件的位置 | String | 是 | --- | --- |
| org_index | 控件图层层级 | String | 是 | --- | --- |
**注意:archor的值所代表的位置**
* tl:在屏幕的左上角
* tc:在屏幕顶部的中间
* tr:在屏幕的右上角
* cl:在屏幕中间部分的左侧
* cc:在屏幕的中心位置
* cr:在屏幕中间部分的右侧
* bl:在屏幕的左下角
* bc:在屏幕底部的中间
* br:在屏幕的右下角