Dcat Admin 中文文档模态窗 (Modal)
模态窗 (Modal)
Since
v1.7.0
基本使用
use Dcat\Admin\Widgets\Modal;
$modal = Modal::make()
->lg()
->title('标题')
->body(view(...))
->button('<button class="btn btn-primary">点击打开弹窗</button>');
return view(..., ['modal' => $modal]); 功能
标题 (title)
设置弹窗标题
$modal->title('标题');内容 (body)
设置弹窗内容，此方法接受一个参数，允许传入string、Cloure、Illuminate\Contracts\Support\Renderable以及Dcat\Admin\Contracts\LazyRenderable类型值
// 传入字符串
$modal->body('字符串');
// 传入闭包，注意闭包必须返回字符串类型值或空值
$modal->body(function () {
return view(...)->render();
});
// 传入 Renderable
use Dcat\Admin\Widgets\
$modal->body(view(...));
$modal->body(Card::make());
// 传入 LazyRenderable
$modal->body(PostTable::make());底部内容 (footer)
设置弹窗底部内容，此方法接受一个参数，允许传入string、Cloure、Illuminate\Contracts\Support\Renderable以及Dcat\Admin\Contracts\LazyRenderable类型值，用法同上
$modal->footer('字符串');
$modal->footer(view(...));尺寸
默认 500px
// 800px
$modal->lg();
// 1140px
$modal->xl();按钮 (button)
设置按钮
事件监听
支持事件
onShow弹窗显示事件onShown弹窗已显示事件onHide弹窗隐藏事件onHidden弹窗已隐藏事件
用法示例
use Dcat\Admin\Admin;
$modal->onShow(
<<<JS
console.log('显示弹窗', target, $(this));
JS
);
$modal->onHide(
<<<JS
console.log('隐藏弹窗', target, $(this));
JS
);垂直居中 (centered)
设置弹窗垂直居中
$modal = Modal::make()
->xl()
->centered() // 设置弹窗垂直居中
->title(...)
->body(...);内容可滚动 (scrollable)
设置弹窗内容可滚动
$modal = Modal::make()
->xl()
->scrollable() // 设置弹窗内容可滚动
->title(...)
->body(...);表单弹窗
参考文档 工具表单 - 弹窗
关于 LearnKu
粤公网安备 44030502004330号