bootstrap modal+gridview实现弹出框效果

2024-10-22 18:27:08

项目需要在gridview的表单信息中点击更新，弹出表单进行操作，不需要跳转。

1.在girdview中加入更新操作按钮用来调用modal弹窗

'buttons' => [
  'update' => function ($url, $model, $key) {
       return Html::a('<span class="glyphicon glyphicon-pencil"></span>', '#', [
          'data-toggle' => 'modal',
          'data-target' => '#update-modal',
          'class' => 'data-update',
          'data-id' => $key,
          'title'=>'更改状态',
          ]);
        },
      ],

2.gridview的头部创建modal弹窗样式

<?php
use yii\bootstrap\Modal;//模态弹出框
Modal::begin([
  'id' => 'update-modal',
  'header' => '<h4 class="modal-title">更改状态</h4>',
  'footer' => '<a href="#" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">Close</a>',
]);
Modal::end();
?>

3.gridview中ajax

<?php
$requestUpdateUrl = Url::toRoute('update');
$updateJs = <<<JS
  $('.data-update').on('click', function () {
    $.get('{$requestUpdateUrl}', { id: $(this).closest('tr').data('key') },
      function (data) {
        $('.modal-body').html(data);
      }
    );
  });
JS;
$this->registerJs($updateJs);
?>

4.控制器update方法

 public function actionUpdate($id)
{
  $model = Order_packet::findOne($id);
  $model->setScenario('update');//指定场景，防止时间等变量同时被更改
  if ($model->load(Yii::$app->request->post()) && $model->save()) {
    return $this->redirect(['index']);
  } else {
    return $this->renderAjax('update', [  //这里需要渲染update模版，要在view中写update
      'model' => $model,
    ]);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

js代码 function initView(_box){ var $p = $(_box || document); $('a[target="dialog"]', $p).each(function(event){ $(this, $p).unbind('click').click(function(event){ openModal(event); }); }); } $(function(){ initView(); }); /**关闭modal*/ function hide
bootstrap modal弹出框的垂直居中

本人前端菜鸟,公司项目尝试采用bootstrap,我身先士卒为同事趟"坑",无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,花时间满足之. 最先就是百度咯,方法,就是修改源码 that.$element.children().eq(0).css("position", "absolute").css({ "margin":"0px", "top": functio
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)

最近的项目用的bootstrap前端,手机刚刚更新IOS9发现其中的modal有个bug,首页点弹出框会出现问题,找了好多资料终于找到解决办法.在CSS中加入以下代码 CSS body { padding-right: 0px !important } .modal-open { overflow-y: auto; } PS:bootstrap datepicker 在bootstrap modal中不显示问题可以通过在 input 输入框之外嵌套 <span style="posit
js showModalDialog弹出窗口实例详解

showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法. 使用方法: vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 参数说明: sURL-- 必选参数,类
jQuery+jqmodal弹出窗口实现代码分明

先上图,最终效果如下点击"信息确认" 就是弹出一个确认窗口,把已经填报的信息都放到里面看看. 信息放里面很简答,主要是弹出窗口要做得好看点. 所以选择了jQuery+jqmodal实现实现方法如下1.页面中引用jquery-1.4.2.js和jqModal.js,注意jQuery要在前面,因为jqmodal是以jQuery为基础的. 2.建立jqModal.css,并引用,主要是些美工的东东,注意div.jqmDialog 的 display为 none.高度和宽度要设置好,挡住下
弹出模态框modal的实现方法及实例

弹出模态框modal的实现方法及实例一个简单的点击列表修改按钮,弹出bootstrap模态框,修改状态传到后台php <a href="" data-toggle=" rel="external nofollow" rel="external nofollow" modal" data-target="#myModal" class="btn btn-success btn-sm edit
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

废话不多说了直接给大家贴代码了,具体代码如下所示: $('#myModal').on('shown', function() { $(document).off('focusin.modal'); }); //显示modal $('#myModal').modal('show'); //show完毕前执行 $('#myModal').on('shown', function () { //加上下面这句!解决了~ $(document).off('focusin.modal'); // 打开Dia
bootstrap modal+gridview实现弹出框效果

项目需要在gridview的表单信息中点击更新,弹出表单进行操作,不需要跳转. 1.在girdview中加入更新操作按钮用来调用modal弹窗 'buttons' => [ 'update' => function ($url, $model, $key) { return Html::a('<span class="glyphicon glyphicon-pencil"></span>', '#', [ 'data-toggle' => 'm
基于JavaScript实现弹出框效果

弹出框在网站页面中是必不可少的一部分,今天借助我们平台给大家分享使用js实现简单的弹出框效果,本文写不好,还请见谅! 首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q
Android编程实现仿QQ发表说说，上传照片及弹出框效果【附demo源码下载】

本文实例讲述了Android编程实现仿QQ发表说说,上传照片及弹出框效果.分享给大家供大家参考,具体如下: 代码很简单,主要就是几个动画而已,图标什么的就随便找了几个,效果图: 动画说明: 1.点击右上角按钮,菜单从顶部下拉弹出,同时背景变暗; 2.再次点击右上角按钮,点击返回键,或者点击空白区域(也就是变暗的部分),菜单向上收回; 3.点击菜单上的按钮响应事件,同时菜单收回(效果同2) 重要说明:动画结束后必须clearAnimation,否则隐藏状态的view依然能响应点击事件主体代码
ionic2 tabs使用 Modal底部tab弹出框

项目要实现一个功能,在首页底部中间的tab弹出一个页面,而且是没有底部栏的,而不是像平常滑动的一个子页面. 像这样: 做法其实很简单 1.修改tabs.html中的tab,去掉[root]="tab2root"属性,就不会显示子页面了 2.添加(ionSelect)方法,点击这个tab按钮的事件,用来显示你的弹出modal 去掉之前: <ion-tab [root]="tab5Root" tabIcon="call" (ionSelect)
Bootstrap的popover（弹出框）2秒后定时消失的实现代码

Bootstrap Popover(弹出框)是使用定制的 Jquery 插件创建的.它可以用来显示任何元素的一些信息. 先在目标DOM结构中弹出小提示,然后2秒后提示消失 <input type="text" class="form-control" id="tableName" placeholder="请输入表格名称" data-toggle="tooltip" data-placement=&q
Android编程实现仿易信精美弹出框效果【附demo源码下载】

本文实例讲述了Android编程实现仿易信精美弹出框效果.分享给大家供大家参考,具体如下: 截图: 动画效果介绍: 1.点击ActionBar上"+"按钮,菜单从上方弹出(带反弹效果): 2.再次点击"+".点击空白区域或者点击返回键,菜单向上方收起: 3.点击弹出框上的按钮时,该按钮放大,其它按钮缩小,菜单整体渐变退出. 主体代码: 1.Activity. /** * 仿易信动画弹出框 */ public class MainActivity extends Ac
Android实现蒙版弹出框效果

本文实例为大家分享了Android蒙版弹出框效果的具体代码,供大家参考,具体内容如下自定义 package cn.lxsdb.yyd.app.dialog; import cn.lxsdb.yyd.app.R; import cn.lxsdb.yyd.app.constants.AppIntent; import android.app.Dialog; import android.content.Context; import android.content.Intent; import a
小程序自定义弹出框效果

本文实例为大家分享了小程序自定义弹出框效果的具体代码,供大家参考,具体内容如下 my-pop----api: title ------字符串---------自定义弹窗标题context ------字符串---------自定义弹窗内容cancelTxt ------字符串---------取消按钮文本cancelCor ------字符串---------取消按钮颜色inp ------布尔值---------true文本弹出框---------fasle默认弹出框okTxt ------字
React实现pc端的弹出框效果

本文实例为大家分享了React实现pc端弹出框效果的具体代码,供大家参考,具体内容如下最近学习react碰见了一个小坑不知道为什么我在做一个弹出框的小demo 很简单的一个小demo 就是桌面上一个按钮点击出现一个弹出框弹出框下面有一个遮罩层 1.我们现在src文件夹下建立一个 Dialog 组件 import React,{Component} from 'react' import '../dialog.css' export default class Dialog exte
JS组件Bootstrap实现弹出框效果代码

为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 插件依赖弹出框依赖工具提示插件,因此需要先加载工具提示插件. 选择性加入的功能出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们. 弹出框在按钮组和输入框组中使用时,需要额外的设置当提示框与.btn-group 或 .input-group联合使用时,你需要指定container: 'body'选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之

bootstrap modal+gridview实现弹出框效果

相关推荐

随机推荐