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.ini中文版
Oct 09 PHP
php 静态变量的初始化
Nov 15 PHP
如何使用php判断所处服务器操作系统的类型
Jun 20 PHP
PHP set_error_handler()函数使用详解(示例)
Nov 12 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
Mar 19 PHP
php获取从html表单传递数组的方法
Mar 20 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
Mar 18 PHP
thinkPHP3.2.2框架行为扩展及demo示例
Jun 19 PHP
PHP抽象类基本用法示例
Dec 28 PHP
PHP实现的支付宝支付功能示例
Mar 26 PHP
php解决安全问题的方法实例
Sep 19 PHP
php ActiveMQ的安装与使用方法图文教程
Feb 23 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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
php模拟post提交数据的方法
2015/02/12 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
javascript发送短信验证码实现代码
2015/11/12 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
对于Python中RawString的理解介绍
2016/07/07 Python
pycharm设置注释颜色的方法
2018/05/23 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
详解python的argpare和click模块小结
2019/03/31 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
pandas中的series数据类型详解
2019/07/06 Python
C语言笔试题回忆
2015/04/02 面试题
客服实习的个人自我鉴定
2013/10/20 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs