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. LinkedHashMap 实现LRU缓存

    date: 2020-07-09 13:52:00 updated: 2020-07-21 17:40:00 LinkedHashMap 实现LRU缓存 参考 LinkedHashMap是HashMa ...

  2. BadBoy+JMeter应用过程中遇到的问题汇总

    前几天对HTTPS协议的系统做压力测试,用LoadRunner录制脚本过程中,系统登录后跳转的页面一直加载不出来,试了很多办法没解决这个问题.转而利用BadBoy+JMeter进行压测.以下为在运用B ...

  3. python机器学习卷积神经网络(CNN)

    卷积神经网络(CNN) 关注公众号"轻松学编程"了解更多. 一.简介 ​ 卷积神经网络(Convolutional Neural Network,CNN)是一种前馈神经网络,它的人 ...

  4. MySQL连接报错(错误:1130)

    1. 原因 显示这个错误是因为没有连接到该机器MySQL数据库的权限,这是在一开始安装MySQL是默认设置的. 在数据库mysql下有一张名为`user`的表,其中的字段user下的root的值默认为 ...

  5. 聊聊Go代码覆盖率技术与最佳实践

    "聊点干货" 覆盖率技术基础 截止到Go1.15.2以前,关于覆盖率技术底层实现,以下知识点您应该知道: go语言采用的是插桩源码的形式,而不是待二进制执行时再去设置breakpo ...

  6. 解Bug之路-NAT引发的性能瓶颈

    解Bug之路-NAT引发的性能瓶颈 笔者最近解决了一个非常曲折的问题,从抓包开始一路排查到不同内核版本间的细微差异,最后才完美解释了所有的现象.在这里将整个过程写成博文记录下来,希望能够对读者有所帮助 ...

  7. 剑指Offer-Python(11-15)

    11.二进制中1的个数 链接:https://www.nowcoder.com/questionTerminal/8ee967e43c2c4ec193b040ea7fbb10b8?answerType ...

  8. WPF应用中一种比较完美的权限控制设计方式

    如题近段时间 需要在wpf应用中设计一个权限控制 , 简而言之的说 你懂的 对于IT人员来说都知道的 常见的软件功能 首先要有用户 用户,然后用户属于哪个角色 ,然后各个角色都有自己的可供操作的一堆功 ...

  9. Spider--补充--Re模块_1

    # @ Author : Collin_PXY # 正则表达式: import re # 1,分步写法: # 1)rule.search(string) pattern='各小区' rule=re.c ...

  10. 在 JavaScript 中,我们能为原始类型添加一个属性或方法吗?

    原始类型的方法 JavaScript 允许我们像使用对象一样使用原始类型(字符串,数字等).JavaScript 还提供了这样的调用方法.我们很快就会学习它们,但是首先我们将了解它的工作原理,毕竟原始 ...