Yii2中如何使用modal弹窗(基本使用)


Posted in PHP onMay 30, 2016

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

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

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

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

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

1、use yii\bootstrap\Modal;

2、创建一个按钮,用于调modal的显示

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

3、创建modal

<?php 
Modal::begin([
'id' => 'create-modal',
'header' => '<h4 class="modal-title">创建</h4>',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]); 
$requestUrl = Url::toRoute('create');
$js = <<<JS
$.get('{$requestUrl}', {},
function (data) {
$('.modal-body').html(data);
} 
);
JS;
$this->registerJs($js);
Modal::end(); 
?>

4、修改我们的create操作如下

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,
]);
}
}

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

Yii2中如何使用modal弹窗(基本使用)

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

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

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

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

PHP 相关文章推荐
PHP 和 COM
Oct 09 PHP
ThinkPHP中实例Model方法的区别说明
Aug 21 PHP
一个PHP的QRcode类与大家分享
Nov 13 PHP
php 多关键字 高亮显示实现代码
Apr 23 PHP
如何判断php数组的维度
Jun 10 PHP
浅析51个PHP处理字符串的函数
Aug 02 PHP
php遍历目录与文件夹的多种方法详解
Nov 14 PHP
CodeIgniter与PHP5.6的兼容问题
Jul 16 PHP
[原创]PHP字符串中插入子字符串方法总结
May 06 PHP
PHP7.3.10编译安装教程
Oct 08 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
Nov 19 PHP
laravel框架使用阿里云短信发送消息操作示例
Feb 15 PHP
[原创]php求圆周率的简单实现方法
May 30 #PHP
smarty中改进truncate使其支持中文的方法
May 30 #PHP
php实现的一段简单概率相关代码
May 30 #PHP
PHP中的表达式简述
May 29 #PHP
一个简单的php路由类
May 29 #PHP
解读PHP中上传文件的处理问题
May 29 #PHP
round robin权重轮循算法php实现代码
May 28 #PHP
You might like
PHP新手上路(十四)
2006/10/09 PHP
php分页函数完整实例代码
2014/09/22 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
js 小数取整的函数
2010/05/10 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
chrome调试javascript详解
2015/10/21 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
详解js中==与===的区别
2017/01/08 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
谈谈vue中mixin的一点理解
2017/12/12 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
webpack 处理CSS资源的实现
2019/09/27 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
利用python3随机生成中文字符的实现方法
2017/11/24 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python用Jira库来操作Jira
2020/12/28 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
房产委托公证书样本
2014/04/04 职场文书
化工操作工岗位职责
2014/04/29 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
golang 语言中错误处理机制
2021/08/30 Golang
利用Apache Common将java对象池化的问题
2022/06/16 Servers