yii2基础之modal弹窗的基本使用

2019独角兽企业重金招聘Python工程师标准>>>

Modal也即是模态窗，通俗的说就是弹窗。是一款bootstrap的js插件，使用效果也是非常好。

为什么要使用modal就不必多说了，一个网站，在开发过程中你说你没用过js弹窗我都不信！好的弹窗不仅仅给人以美感，也会让我们开发效率提高，甚至心情也会舒畅！

我们看看在yii2中如何使用modal。

比如我们之前添加数据的时候，通常情况下会点击按钮跳转到添加页面，保存后再跳转到列表页。

现在我们希望点击添加按钮的时候，在当前页面弹窗添加数据，看具体实现。

1、创建一个按钮，用于调modal的显示

echo Html::a('创建', '#', ['id' => 'create','data-toggle' => 'modal','data-target' => '#create-modal','class' => 'btn btn-success',
]);

2、创建modal(页面底部创建即可)

use yii\bootstrap\Modal;
Modal::begin(['id' => 'create-modal','header' => '<h4 class="modal-title">创建</h4>','footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]);
Modal::end();

3、给按钮添加点击事件

$requestUrl = Url::toRoute('create');
$js = <<<JS$(document).on('click', '#create', function () {$.get('{$requestUrl}', {},function (data) {$('.modal-body').html(data);}  );});
JS;
$this->registerJs($js);

4、我们在第三步中看到，点击[创建]按钮会异步请求数据，我们修改请求操作方法如下

public function actionCreate()
{$model = new Test();if ($model->load(Yii::$app->request->post()) && $model->save()) {return $this->redirect(['index']);} else {return $this->renderAjax('create', ['model' => $model,]);}
}

5、这个时候我们点击按钮[创建]，会看到modal弹窗，截图如下。

有同学可能要说，这个页面没必要异步加载过来。确实，你也可以直接在页面上echo $this->renderAjax();，不过需要提醒的是，该操作记得修改表单提交的action哦。

关于modal的使用，此处有两点需要提醒大家：

在控制元素（比如按钮或者链接）上设置属性 data-toggle="modal"，
同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）

以上，我们仅仅是在yii2中实现了modal的基本使用。

思考两个问题

modal如何结合gridview进行使用
modal中如果使用的是表单，表单提交后如何对数据进行验证

转载于:https://my.oschina.net/botkenni/blog/1539778

yii2基础之modal弹窗的基本使用相关推荐

yii2 shi用modal弹窗 select2搜索框无法使用
在modal使用begin的时候指定options选项的tabindex为false Modal::begin([// ......'options' => ['tabindex' => ...
yii2 modal弹窗之ActiveForm ajax表单异步验证
作者:白狼出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
yii表单ajax验证,yii2 modal弹窗之ActiveForm ajax表单异步验证
前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹 ...
小程序确定取消弹窗_浅析微信小程序modal弹窗关闭默认会执行cancel问题
在我们使用小程序的modal组件时候,有的时候会碰到一个问题,那就是弹框的关闭,我们并没有选择取消或确定,而是点击弹框之外的部分,这个时候弹框会关闭,按理来说不会触发取消和确定的绑定事件,但是有的时候 ...
ant弹窗_基于AntDesign改造优化的Modal弹窗
一.前言在日常开发中,Modal使用必不可少,但是如果一个页面Modal弹窗过多,Modal的使用又必须要在render()方法里声明,这无疑是一件很恐怖的事情,就像如下场景 render() { ...
微信小程序自定义modal弹窗组件
微信小程序开发中官方自带的wx.showModal,这个弹窗 API有时候并不能满足我们的弹窗效果,所以往往需要自定义modal组件.下面我们进行一个自定义modal弹窗组件的开发,并进行组件的引用, ...
小程序自定义modal弹窗封装实现
前言小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示 ...
vue3 antd项目实战——Modal弹窗自定义遮罩（利用maskStyle属性自定义遮罩样式）
vue3 antd项目实战--Modal弹窗自定义遮罩 maskStyle 知识回调场景复现关于mask遮罩的API属性利用maskStyle属性自定义遮罩样式知识回调文章内容文章链接 v ...
react实现Modal弹窗
一.Dialog.js文件 import React, {useMemo, useEffect, useState} from 'react' import ReactDOM from 'react- ...

yii2基础之modal弹窗的基本使用

yii2基础之modal弹窗的基本使用相关推荐

最新文章

热门文章