最近在使用Yii2模板自己搭建一个小网站，其中涉及到使用Modal进行一些小页面的交互设计。

但是在使用Modal过程中，发现网络上虽然有一些教程，但是有些比较老，或者理解不到位，导致我在使用的过程中存在一些问题。

当然，提前说明，我自己并不是专门做网站的，如果说有一些不规范的地方，请不要模仿。

这里我这要说明以下两点内容：如何调用bootstrap的modal进行页面的交互和显示

如何在Modal上同后台进行更加复杂的数据操作

对于第一点，实际上bootstrap官方教程写的是比较全面的，但是在Yii2里有更加简单的写法：//以下两块内容放在页面PHP里，并且引用需要的包，推荐使用PhpStorm，会自动帮助引用

echo Html::a('buttonName', '#', [//通过Yii2内置PHP函数生成显示modal的按钮

'type' => 'button',

'class' => 'btn btn-primary',

'id' => 'buttonID',

'data-toggle' => 'modal',//意味着点击按钮会调用modal显示

'data-target' => '#modalID',//显示哪个modal，就是modal的id前加#

'data-one' => "Dataone",//很多时候这个按钮是使用PhP批量生成的，每个按钮带有不同的信息

'data-two' => "Datatwo",//如果说这个信息之后在Modal里是额外需要的，那么可以在这个属性中保存

'data-three' => "Datathree"

]);

//Modal的定义可以放在页面的任意位置，不需要考虑是否在按钮之前定义，因为到时候是进行全页面按照ID搜索的

Modal::begin([//通过Yii2内置PHP函数生成Modal

'id' => 'modalID',

'header' => '

标题

',

'footer' => '关闭按钮',

]);

?>

Modal::end();//Modal结束

?>

在上述定义了Modal和按钮之后，我们可能希望在Modal上显示来自后台的数据，

在这里我就举一个简单的例子，比如说我们就把按钮里保存的Dataone Datatwo和Datathree在php后台拼接成一个字符串返回。

这样我就完成了数据的上传、处理和返回。//注册一个JS函数在Modal进行显示的时候进行响应，当然可以写一个在Modal里面的提交按钮

$('#modalID').on('show.bs.modal', function (event) {

"use strict";

var button = $(event.relatedTarget)

var data1 = button.data('one')

var data2 = button.data('two')

var data3 = button.data('three')

//下面一句是关键，前面只是获取来自按钮的数据

//下面才是真正向后台发起请求，当然也可以把这部分改成表单的提交

//但是关键就是url需要明确到底是向哪个控制器发起请求

//因为肯定不是要刷新当前页面，我个人推荐是独立一个控制器，这样不需要大量的判断

//我这里的做法是通过PHP动态获得当前Url，并转跳向modalact控制器

$.get("<?php

$requestUrl = \yii\helpers\Url::toRoute(['modalact']);

echo $requestUrl;

?>", {data1 : data1, data2 : data2, data3 : data3},//需要上传的数据

function (data) {

$('#modalID .modal-body').html(data);//把返回的页面写进modal的body

})

})

//控制器中写入如下响应函数

public function actionModalact(){

$data1= Yii::$app->request->get('data1');

$data2= Yii::$app->request->get('data2');

$data3= Yii::$app->request->get('data3');

return $this->renderAjax('ajaxView',['res' => $data1.$data2.$data3]);//返回一个ajax页面，这个ajaxView在下面定义

}

此时还需要一个ajax返回用的页面，也就是要在Modal中显示的页面，因此要创建一个View//创建一个ajaxView.php

/* @var $this yii\web\View */

/* @id $this array */

/* @res $this array */

use yii\bootstrap\Modal;

use yii\helpers\Html;

$this->title = 'ModalView';

$this->params['breadcrumbs'][] = $this->title;

?>

if($res != null){

echo $res;//输出之前返回的res对象

}

?>

至此就完成了从页面显示Modal到提交数据到服务器后台，处理后返回结果到前端显示。

感谢您的赞助~

打开微信扫一扫，即可进行扫码打赏哦~

版权声明 :本文未使用任何知识共享协议授权，您可以任何形式自由转载或使用。