开篇
在日常开发中，让 Modal 里面 再嵌套一个modal。可以让用户使用体验更好，不用再次切换页面。会让使用操作更丝滑。
dcat - admin 里面的modal嵌套 状况
非异步加载的modal嵌套 第二个modal 能正常弹出 ,但是被第一个modal遮挡.异步加载的modal嵌套 第二个modal 弹出后，但是被第一个modal遮挡，数秒后自动关闭，因为触发了异步请求，得到的还是第一个modal的内容。
如何解决 到达 理想效果
1.非异步加载的modal嵌套 还是想使用dcat写法
// 第二个 modal
$modal2 = Modal::make('查看环境要求','444');
$modal2->title('查看环境要求');
$modal2->style('z-index:1052 !important' ,true);
$modal2->sm();
$modal2->button('查看');
// 第一个 modal
$modal1 = Modal::make();
$modal1->title('安装 ' . $actions->row->product_name . '(' . $actions->row->package_name . ') 其它版本');
$modal1->lg();
$modal1->body($modal2->render())
//$modal3->body((new ReleasesTable())->payload(['package_name' => $actions->row->package_name,'product_name'=>$actions->row->product_name,'product_slug'=>$actions->row->product_slug]))
->button('<span class="tips" data-title="安装其它版本"> <i class="fa fa-sort-desc" style="font-size: 20px"></i> </span>');
$actions->prepend($modal1);
关键点 （重新定义z-index ,让它高于 原来的 z-index:1050 ）
// 第一个参数是样式定义，第二个参数是把样式追回到后面(可选)
$modal2->style('z-index:1052 !important' ,true);
// 还需要 给modal 加一个 阴影效果 ，体现层次感：(不加的话会让两个modal 混在一起的，因为背景都是白色。)
Admin::style(
<<<CSS
.modal-dialog{box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;}
CSS
);
2.异步加载的modal嵌套 结合 layer.open() 达到完美效果
第一个 modal
// 第一个 modal
$modal1 = Modal::make();
$modal1->title('安装 ' . $actions->row->product_name . '(' . $actions->row->package_name . ') 其它版本');
$modal1->lg();
$modal1->body((new ReleasesTable())->payload(['package_name' => $actions->row->package_name,'product_name'=>$actions->row->product_name,'product_slug'=>$actions->row->product_slug]))
->button('<span class="tips" data-title="安装其它版本"> <i class="fa fa-sort-desc" style="font-size: 20px"></i> </span>');
$actions->prepend($modal1);
第二个 modal 异步加载数据表格
<?php
namespace Dcat\Admin\PluginStore\Renderable;
use Dcat\Admin\Admin;
use Dcat\Admin\Grid;
use Dcat\Admin\Grid\LazyRenderable;
use Dcat\Admin\Models\Administrator;
use Dcat\Admin\PluginStore\Repositories\MarketplaceReleases;
use Dcat\Admin\DcatplusDemo\Http\Controllers\Forms\UserProfile;
use Dcat\Admin\Widgets\Modal;
class ReleasesTable extends LazyRenderable
{
public function grid(): Grid
{
// 监听点击事件，打开弹窗
// layer.open type: 1 是加载html ,type: 2 可以加载网址
Admin::script(
<<<SCRIPT
$('.preview-tags-require').click(function () {
var package_name = $(this).attr('data-package_name'); var version_num = $(this).attr('data-version_num'); var tags_require = $(this).attr('data-tags_require'); layer.open({ type: 2, title: '查看 环境要求', area: ['65%', '80%'], content: '/admin/plugin-store/viewTagsRequire?package_name='+package_name+'&version_num='+version_num+'&tags_require='+tags_require, });});
SCRIPT
);
$package_name = $this->payload['package_name'];
return Grid::make(new MarketplaceReleases(), function (Grid $grid) use ($package_name) {
//$grid->column('id', 'ID')->sortable();
$grid->model()->where(['package_name'=> $package_name]);
$grid->setKeyName($package_name);
$grid->disableRowSelector();
$grid->column('version_name','版本号');
$grid->column('version_info','描述')->limit(15);
$grid->column('release_date','发行时间');
$grid->column('tags_require','环境要求')->display(function (){
// 返回 带有 (preview-tags-require) class 并把要传递的数据写到 属性上 如：data-package_name="'.$this->package_name.'"
return '<div class="preview-tags-require" data-tags_require="'.urlencode($this->tags_require).'" data-package_name="'.$this->package_name.'" data-version_num="'.$this->version_num.'">查看</div>';
}); $grid->paginate(10);
$grid->setActionClass(Grid\Displayers\Actions::class);
$grid->actions(function ($actions) {
// 去掉删除
$actions->disableView();
$actions->disableDelete();
// 去掉编辑
$actions->disableEdit();
}); $grid->disableToolbar();
$grid->filter(function (Grid\Filter $filter) {
$filter->like('username')->width(4);
$filter->like('name')->width(4);
}); }); }}
dcat-admin 并未停止不前，plus版 持续更新 保持活力
dcat-plus admin （plus版）沿用 dcat-admn 最新代码，并让dcat-admin 保持活力。已支持到Laravel11，并新增多个组件。
dcat-admin（plus版）未来属于集体
期待您的参与，让 dcat-admin 成为国内最开放，最好用的后台极速开发框架
加入微信技术交流群
加wx:Q3664839 拉你入群