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+Html+缓存
Dec 20 PHP
php set_magic_quotes_runtime() 函数过时解决方法
Jul 08 PHP
工厂模式在Zend Framework中应用介绍
Jul 10 PHP
PHP flock 文件锁详细介绍
Dec 29 PHP
php天翼开放平台短信发送接口实现方法
Dec 22 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
Mar 17 PHP
PHP记录和读取JSON格式日志文件
Jul 07 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
Mar 14 PHP
php+redis消息队列实现抢购功能
Feb 08 PHP
PHPUnit测试私有属性和方法功能示例
Jun 12 PHP
php中isset与empty函数的困惑与用法分析
Jul 05 PHP
laravel入门知识点整理
Sep 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
Python开发常用的一些开源Package分享
2015/02/14 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python3 mmh3安装及使用方法
2019/10/09 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
创先争优活动党员公开承诺书
2014/08/29 职场文书
转让协议书范本
2014/09/13 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
python中%格式表达式实例用法
2021/06/18 Python