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

 更新时间:2016年05月30日 15:43:15   作者:白狼  
这篇文章主要介绍了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的基本使用。

相关文章

  • 使用 PHPMAILER 发送邮件实例应用

    使用 PHPMAILER 发送邮件实例应用

    以前的mail(),已经不在流行,所以放上最近用的实例,留做回忆;需要的朋友可以参考下
    2012-11-11
  • php+mongodb判断坐标是否在指定多边形区域内的实例

    php+mongodb判断坐标是否在指定多边形区域内的实例

    本篇文章主要介绍了php+mongodb判断坐标是否在指定多边形区域内的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-10-10
  • thinkphp普通查询与表达式查询实例分析

    thinkphp普通查询与表达式查询实例分析

    这篇文章主要介绍了thinkphp普通查询与表达式查询,以实例形式较为详细的分析了thinkphp中的普通查询与表达式查询具体用法,包含普通查询的字符串方式与数组方式以及表达式查询中的各种常用技巧,非常具有实用价值,需要的朋友可以参考下
    2014-11-11
  • 浅谈PHP进程管理

    浅谈PHP进程管理

    这篇文章主要介绍了PHP进程管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Zend Framework教程之Autoloading用法详解

    Zend Framework教程之Autoloading用法详解

    这篇文章主要介绍了Zend Framework教程之Autoloading用法,详细分析了Autoloading的原理并结合实例形式分析了Autoloading相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-03-03
  • 布隆过滤器(bloom filter)及php和redis实现布隆过滤器的方法

    布隆过滤器(bloom filter)及php和redis实现布隆过滤器的方法

    这篇文章主要介绍了布隆过滤器(bloom filter)介绍以及php和redis实现布隆过滤器实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • PHP 代码简洁之道(小结)

    PHP 代码简洁之道(小结)

    这篇文章主要介绍了PHP 代码简洁之道(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-10-10
  • Laravel认证原理以及完全自定义认证详解

    Laravel认证原理以及完全自定义认证详解

    最近在学习laravel框架,所以下面这篇文章主要给大家介绍了关于Laravel认证原理以及完全自定义认证的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-07-07
  • PHP 验证登陆类分享

    PHP 验证登陆类分享

    本文给大家介绍的是用php实现的用户登录与验证的一段代码,没有把登录和数据库查询分开,有需要的朋友,可以参考学习下
    2015-03-03
  • php 写入缓存文件、读取缓存文件的函数代码

    php 写入缓存文件、读取缓存文件的函数代码

    有时候我们需要将一些配置文件保存到静态文件中,方便后期调用,这里就为大家分享两个函数,需要的朋友可以参考一下
    2017-08-08

最新评论