让DcatAdmin再放光芒系列 - 让modal嵌套的实现方法

Dcatplus-杨光的个人博客 / 361 / 8 / 创建于 4个月前 / 更新于 4个月前

开篇

在日常开发中，让 Modal 里面再嵌套一个modal。可以让用户使用体验更好，不用再次切换页面。会让使用操作更丝滑。

dcat - admin 里面的modal嵌套状况

非异步加载的modal嵌套 第二个modal 能正常弹出 ,但是被第一个modal遮挡.
异步加载的modal嵌套 第二个modal 弹出后，但是被第一个modal遮挡，数秒后自动关闭，因为触发了异步请求，得到的还是第一个modal的内容。

如何解决到达理想效果

1.`非异步加载的modal嵌套` 还是想使用dcat写法

让DcatAdmin再放光芒系列 - 让modal嵌套的实现方法

// 第二个 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> &nbsp;&nbsp;</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() 达到完美效果

让DcatAdmin再放光芒系列 - 让modal嵌套的实现方法

第一个 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> &nbsp;&nbsp;</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,shade: [0.8, '#393D49'], 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);
 }); }); }}