yii2基础之modal弹窗的基本使用
来源:互联网 发布:淘宝恶意差评怎么办 编辑:程序博客网 时间:2024/05/21 14:47
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的使用,此处有两点需要提醒大家:
- 在控制元素(比如按钮或者链接)上设置属性 data-toggle="modal",
- 同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框(带有 id="identifier")
以上,我们仅仅是在yii2中实现了modal的基本使用。
思考两个问题
- modal如何结合gridview进行使用
- modal中如果使用的是表单,表单提交后如何对数据进行验证
转载自 白狼 http://www.manks.top/yii2_modal_baseuse.html
0 0
- yii2基础之modal弹窗的基本使用
- yii2中如何使用modal弹窗之基本使用
- yii2中如何使用modal弹窗之结合gridview的使用
- yii2 modal弹窗之ActiveForm ajax表单异步验证
- yii2使用modal弹窗
- Yii2之cache的使用
- Yii2 使用基本配置
- alter,modal弹框的使用心得
- modal的使用
- React-Native 组件之 Modal的使用详解
- Yii2 yii2-imagine的使用
- Yii2之gii的配置与使用
- Yii2之gii的配置与使用
- yii2的基础操作
- Yii2之使用javascript
- Ionic教程-modal的使用
- storyboard中Modal 的使用
- Lean Modal模态框的使用
- 复习JQ (3)
- Cow Acrobats POJ
- OpenCV——java使用相关博客
- 一键安装各种版本shadowsock
- Python文件操作
- yii2基础之modal弹窗的基本使用
- 算法:位运算
- Java基础知识的小总结
- Android之ThreadPoolExecutor源码分析
- Python
- zstack(二)zstack二次开发
- TypeError: 'str' object is not callable
- 使用STS创建maven项目,以及创建完成后如何解决项目报错问题
- java 时间处理