modal

项目中以前就经常用到模态框,但是一直没有时间来整理, 好在今天稍微有点时间,就来讲一下angular-ui-bootstrap-modal这个功能要怎么来做,以及其中不得不提的几个点 首先还是最基础的类库引入,官方网站是提了一下版本的 https://angular-ui.github.io/bootstrap/ 这里给个网址可以自己看一下 然后在其中版本依赖就说了这么几个点 angular的版本要在1.4.x以上,1.5.5版本还在测试中,然后ui-bootstrap-tpls.js这个类库是在0.14.3以上,然后其他的组件要求都是在1.5.5一下就可以了 因为现在官方最新的angular版本好像是1.5.7,注意一下这个点就可以了,其他的问题应该都不大, 该怎么引入还是怎么引入 那么接下来直接看我的引入版本吧 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls

作者：白狼 出处： http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 前面我们讲述了 yii2中如何使用modal 以及 yii2 gridview列表内更新操作如何使用modal的问题 ，本以为modal要告一段落可以开始新的话题了，但是实际问题往往超乎想像，这不modal弹窗提交的表单说是怎么验证的问题又出来了，又出来了！ 该问题的实质其实与modal的关系倒不大，其问题的核心在于ActiveForm的异步验证上，解决了首要矛盾，我们本篇文章的问题也就迎刃而解了。顺便再叨唠一句，modal确实没啥好说了。后面若是有我再把话改回来。 yii2中，ActiveForm默认做了客户端验证，但是表单的提交，却不是无刷新的。也就是常常看到的表单提交后页面会刷新。如果想要开启无刷新的模式，只需要在ActiveForm开始开启enableAjaxValidation即可，像下面这样 <?php $form = ActiveForm::begin([ 'id' => 'form-id', 'enableAjaxValidation' => true, 'validationUrl' => Url::toRoute([

作者：白狼 出处： http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 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' => '

作者：白狼 出处： http://www.manks.top/document/easy_blog_manage_system.html 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 先前我们讲述了 yii2中有关modal的基本使用 ，即以创建为例。 实际开发中，我们往往还会遇到列表页数据修改要使用modal的情况，如果是一般的循环展示，相信大多数人看了modal的基本使用都会操作，但是结合gridview估计有些人就开始吃不消了，我们看看如何解决这个问题！ 1、gridview的操作增加[更新]按钮，并指定data-toggle data-target class以及data-id的值​ [ 'class' => 'yii\grid\ActionColumn', 'template' => '{update}', 'buttons' => [ 'update' => function ($url, $model, $key) { return Html::a('更新', '#', [ 'data-toggle' => 'modal', 'data-target' => '#update-modal', 'class' => 'data-update', 'data-id' => $key, ]); },