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

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的基本使用。

赞 (0)

相关推荐

  • Yii2 RESTful中api的使用及开发实例详解

    Yii2 RESTful中api的使用及开发实例详解

    什么是RESTful风格的API 对于各种客户端设备与服务端的通信,我们往往都通过API为客户端提供数据,提供某种资源.关于RESTful的概念,一查一大推,一两句也解释不清,姑且先按照我们通俗的理解:在众多风格.众多原则的API中,RESTful就是一套比较优秀的接口调用方式. Yii2如何实现RESTful风格的API 1.建立单独的应用程序 为了增加程序的可维护性,易操作性,我们选择新建一套应用程序,这也是为了和前台应用.后台应用区分开操作.有些人要嚷嚷了,为啥非得单独搞一套呢?如果你就单

  • Yii2 ActiveRecord多表关联及多表关联搜索的实现

    Yii的ActiveRecord是与数据库打交道的类,也即MVC中的M(模型层),也是ORM的O(Object). 一个老生常谈的问题.最近通过群里的反馈,觉得很多人还是没有去理解这个问题.今天把这个问题讲明白了,看看yii2 ActiveRecord是怎么个多表关联以及如何去优化这个关联. 场景需求: 假设我们有一张用户表user和一张用户渠道表auth,两张数据表通过user.id和auth.uid进行一对一关联.现需要在user列表展示auth表的来源渠道source,且该渠道可搜索. 首

  • Yii2分页的使用及其扩展方法详解

    Yii2分页的使用及其扩展方法详解

    前言: 说明下我们本篇文章都要讲哪些内容 分页的使用,一步一步的教你怎么做 分页类LinkPager和Pagination都可以自定义哪些属性 分页类LinkPager如何扩展成我们所需要的 第一步,我们来看看yii2自带的分页类该如何去使用? 1.controller action use yii\data\Pagination; $query = Article::find()->where(['status' => 1]); $countQuery = clone $query; $pa

  • Yii2组件之多图上传插件FileInput的详细使用教程

    Yii2组件之多图上传插件FileInput的详细使用教程

    在前面给大家写个有关文件上传的文章,包括最基本的yii2文件上传.异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美. 今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便:二来嘛,用这个插件不仅添加的时候好操作,修改的时候也可以直接通过异步的方式将图片悄无声息的删掉:最值得一提的是,界面效果融合了bootstrap,清爽简洁美观,看起来舒服. 说重点,看具体步骤 首先还是先安装组件 复制代码 代码如

  • Yii2 rbac权限控制之rule教程详解

    Yii2 rbac权限控制之rule教程详解

    在我们之前Yii2搭建后台并实现rbac权限控制完整实例教程中,不知道你曾经疑惑过没有一个问题,rule表是做什么的,为什么在整个过程中我们都没有涉及到这张表? 相信我不说,部分人也都会去尝试,或百度或google,到头来也会竹篮打水,这部分讲解的内容少之又少啊! 对于一般的权限系统而言,我们之前做的rbac一般情况下是足够的,即时没有rule,相信你也能实现我们用rule实现的功能. 我们就以官网的例子给出一个具体的操作教程,看看这个神秘的rule到底是做什么的! 看需求: 我们有管理员和普通

  • yii2实现根据时间搜索的方法

    本文实例讲述了yii2实现根据时间搜索的方法.分享给大家供大家参考,具体如下: // date to search $date = DateTime::createFromFormat('m/d/Y', '10/27/2014'); $date->setTime(0,0,0); // set lowest date value $unixDateStart = $date->getTimeStamp(); // add 1 day and subtract 1 second $date->

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

    我们先来看看在yii2中支持的图片上传怎么进行处理的. 首先我们创建model\Upload.php文件 <?php namespace backend\models; use Yii; use yii\web\UploadedFile; class Upload extends \yii\db\ActiveRecord { /** * @var UploadedFile|Null file attribute */ public $file; /** * @return array the v

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

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

    先上图看效果,大家感觉还错请参考功能怎么实现的! 从上图中不难看出,我们制定跳转到某页的功能是基于linkpager之上的扩展,这根我们之前实现的分页扩展明显不同,之前的明显就是重写了!当然,这都不重要,我们看看GoLinkPager的具体实现!名字起的有点lower,不重要! 1.在frontend\components目录新建GoLinkPager类文件 2.该类继承yii\widgets\LinkPager;,如下: namespace frontend\components; use y

  • Yii2.0预定义的别名功能小结

    本文实例讲述了Yii2.0预定义别名.分享给大家供大家参考,具体如下: 这里总结一下,默认预定义别名一共有12个,其中路径别名11个,URL别名只有 @web 1个: @yii 表示Yii框架所在的目录,也是 yii\BaseYii 类文件所在的位置; @app 表示正在运行的应用的根目录,一般是 digpage.com/frontend ; @vendor 表示Composer第三方库所在目录,一般是 @app/vendor 或 @app/../vendor ; @bower 表示Bower第

  • Yii2中使用join、joinwith多表关联查询

    表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_name customer_id book_id) 图书表 (id book_name author_id) 作者表 (id author_name) 模型定义 下面是这4个个模型的定义,只写出其中的关联 Customer class Customer extends \yii\db\ActiveRecord { // 这是获取客户的订单,由上面我们

  • Yii2如何批量添加数据

    批量添加这个操作,在实际开发中经常用得到,今天小编抽空给大家整理些有关yii2批量添加的问题,感兴趣的朋友一起看看吧. 在上篇文章给大家介绍了关于浅析Yii2 gridview实现批量删除教程,当然,着重点在于怎么去操作gridview了,今儿我们来好好谈谈yii2如何批量添加数据? 有同学嚷嚷了,这还不简单,我foreach一循环,每个循环里面直接把数据插入到数据库,简单粗暴完事!我擦嘞,哥,你要是跟我在一个公司,我觉得第二天见到你的概率可就不大了! 话不多说,说多了你在骂我,我们步入正题,先

  • yii2中结合gridview如何使用modal弹窗实例代码详解

    在上篇文章给大家介绍了Yii2中如何使用modal弹窗(基本使用),即以创建为例. 实际开发中,我们往往还会遇到列表页数据修改要使用modal的情况,如果是一般的循环展示,相信大多数人看了modal的基本使用都会操作,但是结合gridview估计有些人就开始吃不消了,我们看看如何解决这个问题! 1.gridview的操作增加[更新]按钮,并指定data-toggle data-target class以及data-id的值 [ 'class' => 'yii\grid\ActionColumn'

  • Yii2框架使用计划任务的方法

    本文实例讲述了Yii2框架使用计划任务的方法.分享给大家供大家参考,具体如下: <?php namespace console\controllers; use yii\console\Controller; /** * Test controller */ class TestController extends Controller { public function actionIndex() { echo "cron service runnning"; } public

  • yii2 modal弹窗之ActiveForm ajax表单异步验证

    前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹窗提交的表单说是怎么验证的问题又出来了,又出来了! 首先撇开modal不谈,我们就yii2 ActiveForm如何以Ajax的方式提交表单做一个简单的说明,这也是我们今天主题的重点,modal确实没啥好说了.后面若是有我再把话改回来. yii2中,ActiveForm默认做了客户端验证,但是表单的

随机推荐