bricks/docs/cn/widgets/modal.md
2024-05-11 17:58:28 +08:00

1.8 KiB

modal

用法

<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>

效果图

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:在屏幕的右下角