博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
yii2中如何使用modal弹窗之基本使用
阅读量:7031 次
发布时间:2019-06-28

本文共 858 字,大约阅读时间需要 2 分钟。

  hot3.png

作者:白狼 出处: 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

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

'create-modal', 'header' => '', 'footer' => 'Close',]); $requestUrl = Url::toRoute('create');$js = <<
registerJs($js);Modal::end(); ?>

4、修改我们的create操作如下

[考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]

关于modal结合gridview,尤其是列表页修改的功能,尤其是modal+select2的问题,可参考文章

转载于:https://my.oschina.net/manks/blog/685935

你可能感兴趣的文章
记一次Hexo迁移
查看>>
RESTful API 中的 Status code 是否要遵守规范
查看>>
第十一天-《企业应用架构模式》-对象-关系行为模式
查看>>
[spring boot] jdbc
查看>>
新的开始!
查看>>
区块链— 比特币中的区块、账户验证和记账
查看>>
Electron打包,NSIS修改默认安装路径
查看>>
分享一些好用的网站
查看>>
【Android】Retrofit 2.0 的使用
查看>>
Nacos系列:基于Nacos的注册中心
查看>>
原生JS 实现复杂对象深拷贝(对象值包含函数)
查看>>
【跃迁之路】【732天】程序员高效学习方法论探索系列(实验阶段489-2019.2.22)...
查看>>
PAT A1060 科学记数法经典例题(全string库解决)
查看>>
仿知乎分享界面
查看>>
最小外接矩形思路以及实现
查看>>
Python是什么?简单了解pythonp-入门
查看>>
利用ES6进行Promise封装总结
查看>>
ES10 特性的完整指南
查看>>
学习threejs走过的坑
查看>>
ThinkSNS+的 SPA(H5)安装教程
查看>>