您的位置：首页 > 编程技术 > php  >  Yii2中如何使用modal弹窗(基本使用)

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

 更新时间：2016年6月12日 10:11  点击：1686

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弹窗，截图如下。

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

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

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

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

[!--infotagslink--]

相关文章

  • Yii2创建表单(ActiveForm)方法详解

    这篇文章主要介绍了Yii2创建表单(ActiveForm)的方法,结合实例形式详细分析了Yii创建表单的详细步骤及相关函数与属性的使用技巧,需要的朋友可以参考下...2016-07-29

  • PHP之深入学习Yii2缓存Cache组件详细讲解

    这篇文章主要介绍了PHP之深入学习Yii2缓存Cache组件详细讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-07-27

  • yii2带搜索功能的下拉框实例详解

    带搜索功能下拉框在项目中经常会用到，下面小编把实现代码分享到脚本之家平台，供大家参考...2016-05-13

  • yii2中的rules 自定义验证规则详解

    yii2的一个强大之处之一就是他的Form组件，既方便又安全。本文给大家介绍yii2中的rules 自定义验证规则，需要的朋友参考下...2016-04-23

  • 如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

    本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用，效果大气漂亮且很实用，感兴趣的朋友一起学习吧...2016-03-03

  • Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等

    使用Yii2的时候,在某些场景和环境下需要获得Yii2目前所处于的module(模型)、Controller(控制器)、Action(方法),以及会调用控制器里面已经定义过的一些公共的方法等.对于这些问题Yii2可以在视图层View中使用$this->context这个对象去获得。下面通过示例代码给大家讲解下...2017-04-03

  • YII2 实现多语言配置的方法分享

    这篇文章主要介绍了YII2实现多语言配置的方法,文中YII2的版本是2.0.7，可能会与其他教程有不同，有需要的朋友可以参考借鉴，下面来一起看看吧。...2017-01-15

  • Yii2实现让关联字段支持搜索功能的方法

    这篇文章主要介绍了Yii2实现让关联字段支持搜索功能的方法,结合实例形式分析了Yii2关联字段搜索功能的原理与相关实现技巧,需要的朋友可以参考下...2016-08-27

  • Yii2框架实现数据库常用操作总结

    本篇文章主要介绍了Yii2框架实现数据库常用操作总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-02-18

  • Yii2基于Ajax自动获取表单数据的方法

    这篇文章主要介绍了Yii2基于Ajax自动获取表单数据的方法,涉及Yii结合ajax调用鼠标事件动态查询表单的相关技巧,需要的朋友可以参考下...2016-08-27

  • yii2分页之实现跳转到具体某页的实例代码

    这篇文章主要介绍了yii2分页之实现跳转到具体某页的实例代码的相关资料,需要的朋友可以参考下...2016-06-12

  • 浅析Yii2集成富文本编辑器redactor实例教程

    yii2集成另外一个强大好用的富文本编辑器Redactor。接下来通过本文给大家介绍Yii2集成富文本编辑器redactor实例教程，感兴趣的朋友一起学习吧...2016-04-28

  • Yii2搭建后台并实现rbac权限控制完整实例教程

    这篇文章主要介绍了Yii2搭建后台并实现rbac权限控制完整实例教程的相关资料,需要的朋友可以参考下...2016-05-04

  • Yii2使用swiftmailer发送邮件的方法

    这篇文章主要介绍了Yii2使用swiftmailer发送邮件的方法,结合实例形式分析了Yii2使用swiftmailer进行邮件发送的设置与代码实现技巧,需要的朋友可以参考下...2016-05-05

  • 浅析Yii2 gridview实现批量删除教程

    在朋友圈里有童鞋向我讨论GridView的问题，有朋友说你用gridview给我去掉表头的链接？我想的很久，用gridview确实不容易实现。有不同见解的朋友欢迎留言。但是呢，这根gridview有个毛线关联啊，明明是要设置ActiveDataProvider，你要我怎么用gridview实现嘛...2016-04-23

  • 浅析Yii2中GridView常见操作

    本文是小编给大家收集整理些有关网络上Yii2中GridView常见操作中出现的大部分问题，本文做一个总结特此分享到脚本之家平台供大家参考...2016-04-23

  • 浅析Yii2 GridView实现下拉搜索教程

    这篇文章主要介绍了浅析Yii2 GridView实现下拉搜索教程的相关资料,需要的朋友可以参考下...2016-04-23

  • 浅析Yii2缓存的使用

    一个有缓存的框架可以说是一个好的框架。下面小编通过本文给大家介绍yii2中是如何使用缓存的，非常具有参考借鉴价值，感兴趣的朋友一起学习吧...2016-05-13

  • Yii2使用自带的UploadedFile实现的文件上传

    这篇文章主要介绍了Yii2使用自带的UploadedFile实现的文件上传的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-06-24

  • 浅析Yii2 GridView 日期格式化并实现日期可搜索教程

    这篇文章主要介绍了Yii2 GridView 日期格式化并实现日期可搜索教程的相关资料,需要的朋友可以参考下...2016-04-23