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:风雨欲来 路在何方?
Oct 09 PHP
php 更新数据库中断的解决方法
Jun 05 PHP
一些需要禁用的PHP危险函数(disable_functions)
Feb 23 PHP
浅析linux下apache服务器的配置和管理
Aug 10 PHP
php自定文件保存session的方法
Dec 10 PHP
Codeigniter校验ip地址的方法
Mar 21 PHP
PHP中余数、取余的妙用
Jun 29 PHP
PHP二维数组去重算法
Dec 17 PHP
关于php 高并发解决的一点思路
Apr 16 PHP
thinkPHP框架实现多表查询的方法
Jun 14 PHP
php微信公众号开发之校园图书馆
Oct 20 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
Aug 03 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开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
Unicode和Python的中文处理
2017/03/19 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Python中bisect的用法及示例详解
2020/07/20 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
关于中国梦的演讲稿
2014/04/23 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
研究生导师推荐信
2015/03/25 职场文书
公司规章制度范本
2015/08/03 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle