1 <?php foreach($data as $model) :?>
2
3   <!-- 按钮触发模态框 -->
4   <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal<?=$model->id;?>">
5
6     点击按钮显示模态框
7   </button>
8   <!-- 模态框(Modal) -->
9   <div class="modal fade" id="myModal<?=$model->id;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
10     <div class="modal-dialog" style="width:600px"><!-- 设置宽度-->
11       <div class="modal-content">
12         <div class="modal-header">
13           <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> x </button>
14           <h4 class="modal-title" id="myModalLabel"> 预览 </h4>
15         </div>
16         <div class="modal-body">
17           在这里添加一些文本
18         </div>
19         <div class="modal-footer">
20           <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
21         </div>
22       </div><!-- /.modal-content -->
23     </div><!-- /.modal -->
24   </div>
25
26 <?php endforeach;?>

yii2.0 模态框简单使用的更多相关文章

  1. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  2. JS模态框 简单案例

    演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. bootstrap3.0 模态框显示的文字超出怎么办

    版本:bootstrap3.3 模态框文字超出 解决方案: 在html中控制自动换行   其实只要在表格控制中添加一句<div style="word-break:break-all& ...

  4. [YII2.0] 高级模板简单安装教程

    YIICHINA官网教程就很完善:http://www.yiichina.com/tutorial/692 但是在yii2框架安装运行init.bat报错php.exe不是内部或外部命令, 解决办法: ...

  5. [moka同学笔记]yii2.0 dropdownlist的简单使用(一)

    1.controller控制中 $modelCountrytelCode = CountryTelCode::find()->orderBy('id DESC')->all(); $tel ...

  6. yii2.0场景的简单使用

    一.规则中使用场景规则场景的使用模型层public function rules(){ return [ [['name','product_id'],'required','on'=>'add ...

  7. bootstrap模态框传值操作

    1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...

  8. JavaScript:bootstrap 模态框的简单应用

    最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...

  9. Bootstrap3.0学习教程十七:JavaScript插件模态框

    这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...

随机推荐

  1. Netty关闭连接流程分析

    在实际场景中,使用Netty4来实现RPC框架,服务端一般会验证协议,最简单的方法的协议探测,判断魔数是否正确.如果服务端无法识别协议会立即抛出异常,并主动关闭连接,此时客户端会收到read信号,在发 ...

  2. requestS模块发送请求的时候怎么传递参数

    首先要确定接口的传递参数是什么类型的,如果接口是查询,使用get请求方法,传递参数的时候使用params, 如果接口需要的json型参数的话,使用json,如果是上传文件的话,通过files参数在传递 ...

  3. TypeScript魔法堂:函数类型声明其实很复杂

    前言 江湖有传"动态类型一时爽,代码重构火葬场",由于动态类型语言在开发时不受数据类型的约束,因此非常适合在项目原型阶段和初期进行快速迭代开发使用,这意味着项目未来将通过重写而非重 ...

  4. 4G工业路由器的性能介绍和应用需求

    4G工业路由器可以实现数据的远程传输和设备控制功能,主要应用的场景包括智能电网.智能交通.智能家居.才智金融.工业自动化.公共安全.环境保护.数字化医疗等领域,特别是大数据或是视频传输等.那么4G工业 ...

  5. NB-IOT覆盖能力有多强 是怎么实现的

    NB-IoT技术中出现以来就以其强大的覆盖能力和通信距离长而受到广大使用者的欢迎,那么NB-IoT覆盖能力究竟是有多大,其覆盖能力应该怎么来衡量? 强大的覆盖能力是NB-IoT技术的最大特点之一,不仅 ...

  6. python栈、队列、文件目录遍历

    一. 栈与队列 关注公众号"轻松学编程"了解更多. 1. 栈 stack 特点:先进先出[可以抽象成竹筒中的豆子,先进去的后出来] 后来者居上 mystack = [] #压栈[向 ...

  7. struct.pack()和struct.unpack() 详解(转载)

    原文链接:https://blog.csdn.net/weiwangchao_/article/details/80395941 python 中的struct主要是用来处理C结构数据的,读入时先转换 ...

  8. Flink的DataSource三部曲之一:直接API

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. 838. Push Dominoes —— weekly contest 85

    Push Dominoes There are N dominoes in a line, and we place each domino vertically upright. In the be ...

  10. JNI-Thread中start方法的调用与run方法的回调分析

    前言 在java编程中,线程Thread是我们经常使用的类.那么创建一个Thread的本质究竟是什么,本文就此问题作一个探索. 内容主要分为以下几个部分 1.JNI机制的使用 2.Thread创建线程 ...