模态窗 (Modal)

未匹配的标注
本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

模态窗 (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)

设置弹窗内容,此方法接受一个参数,允许传入stringCloureIlluminate\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)

设置弹窗底部内容,此方法接受一个参数,允许传入stringCloureIlluminate\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
);

表单弹窗

参考文档 工具表单 - 弹窗

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 1
发起讨论 只看当前版本


mar_he
dcatadmin 模态框问题
0 个点赞 | 3 个回复 | 问答 | 课程版本 2.x