专栏首页IT码农yii2基础之modal弹窗的基本使用

yii2基础之modal弹窗的基本使用

Modal也即是模态窗,通俗的说就是弹窗。是一款bootstrap的js插件,使用效果也是非常好。

为什么要使用modal就不必多说了,一个网站,在开发过程中你说你没用过js弹窗我都不信!好的弹窗不仅仅给人以美感,也会让我们开发效率提高,甚至心情也会舒畅!

我们看看在yii2中如何使用modal。

比如我们之前添加数据的时候,通常情况下会点击按钮跳转到添加页面,保存后再跳转到列表页。

现在我们希望点击添加按钮的时候,在当前页面弹窗添加数据,看具体实现。

1、创建一个按钮,用于调modal的显示

echo Html::a('创建', '#', [
    'id' => 'create',
    'data-toggle' => 'modal',
    'data-target' => '#create-modal',
    'class' => 'btn btn-success',
]);

2、创建modal(页面底部创建即可)

use yii\bootstrap\Modal;
Modal::begin([
    'id' => 'create-modal',
    'header' => '<h4 class="modal-title">创建</h4>',
    'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]); 
Modal::end();

3、给按钮添加点击事件

$requestUrl = Url::toRoute('create');
$js = <<<JS
    $(document).on('click', '#create', function () {
        $.get('{$requestUrl}', {},
            function (data) {
                $('.modal-body').html(data);
            }  
        );
    });
JS;
$this->registerJs($js);

4、我们在第三步中看到,点击[创建]按钮会异步请求数据,我们修改请求操作方法如下

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,
        ]);
    }
}

5、这个时候我们点击按钮[创建],会看到modal弹窗,截图如下。

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

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

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

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

思考两个问题

  1. modal如何结合gridview进行使用
  2. modal中如果使用的是表单,表单提交后如何对数据进行验证

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • select2无法输入搜索和宽度问题解决

    这时候select2的搜索框无法输入,一般有两方面的原因 1.检查下modal的div中是否有tabindex=”-1”,这个属性

    botkenni
  • yii2.0里跨控制器跳转方法

    $control=Yii::app()->runController('site/show/id/2');

    botkenni
  • yii2.0里跨控制器跳转方法

    $control=Yii::app()->runController('site/show/id/2');

    botkenni
  • 5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记

      最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下。希望读者不要在遇到和我一样的问题。

    _淡定_
  • 鲁迅:世上本只需要一个Modal组件

    本文旨在分享,React hook 在中大型中台项目中的实践,适合熟悉 React hook 用法的同学,希望能对你有帮助。

    公众号@魔术师卡颂
  • 前端|利用模态框(Modal)实现弹窗效果

    弹窗效果在网页和app中的运用还是比较常见的。每当在手机里下载一个app时,请求获取存储空间和地理位置时,绝大部分都是使用的弹窗。它不仅提醒作用强、节约页面空间...

    算法与编程之美
  • 简单方法解决bootstrap3 modal异步加载只一次的问题

    用过bootstrap3自身的modal的remote属性的人可能都有相同的疑惑:就是点击弹出modal后再次点击会从缓存中加载内容,而不会再次走后台,解决办法...

    飞奔去旅行
  • Js逆向必备技能之-动态hook找入口

    这样的话我们就可以hook cookie的读写,只要接下来的代码读写cookie就会断点断下来。让他的混淆代码无所遁形 ,我们来演示一下

    sergiojune
  • 爬虫遇到了点问题

    golang爬珍爱网代码优化后,运行报了如下的错,找了半小时才找到原因,在此记录一下。

    我的小碗汤
  • 稳固基础!一节课掌握python内置数据类型—列表

    点击链接加入群【python┮】:https://jq.qq.com/?_wv=1027&k=577hmAB

    云飞

扫码关注云+社区

领取腾讯云代金券