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. 解决LINK : fatal error LNK1104: 无法打开文件“xxxx.lib”

    举个例子

  2. git每次提交代码都要设置账号密码的问题

    git config --global credential.helper store 待下一次提交代码的时候,输入了正确的用户名和密码,之后 就不需要输入用户名密码

  3. 4G工业路由器的传输功率是越高越好吗?

    现在人们越来越多的利用运营商网络进行家庭的Wi-Fi上网,早已是非常普遍的事情了.而无线路由器作为设备组网的重要组成部分,与路由器相关的话题.知识总会能够引发大家的热议.这里,以众山物联网研发.生产的 ...

  4. MyBatis 原理浅析——基本原理

    前言 MyBatis 是一个被广泛应用的持久化框架.一个简单的使用示例如下所示,先创建会话工厂,然后从会话工厂中打开会话,通过 class 类型和配置生成 Mapper 接口的代理实现,最后使用 Ma ...

  5. OpenCascade拓扑对象之:拓扑对象方向继承关系

    @font-face { font-family: "Times New Roman" } @font-face { font-family: "宋体" } @ ...

  6. Django实现文件上传功能

    文件上传 关注公众号"轻松学编程"了解更多. 1.创建上传文件夹 在static文件夹下创建uploads用于存储接收上传的文件 在settings中配置,MEDIA_ROOT=o ...

  7. Ethernaut靶场练习(0-5)

    1.Hello Ethernaut 目标: 安装好metamask,熟悉操作命令. 操作过程: 我们先提交一个实例,然后打开游览器F12.然后跟他的提示走. 先输入contract.info(). c ...

  8. fasd

    基本排序算法 冒泡排序 没什么可说的, 改进方法就是加一个标志位防止有序后重复遍历. 由于需要遍历两次, 所以时间复杂度O(N^2) 传送门 --> 冒泡排序 选择排序 外层从0开始默认oute ...

  9. 【Kata Daily 190916】String end with?(字母结尾)

    题目: Complete the solution so that it returns true if the first argument(string) passed in ends with ...

  10. 一款基于.NET Core的认证授权解决方案-葫芦藤1.0开源啦

    背景 18年公司准备在技术上进行转型,而公司技术团队是互相独立的,新技术的推动阻力很大.我们需要找到一个切入点.公司的项目很多,而各个系统之间又不互通,导致每套系统都有一套登录体系,给员工和客户都带来 ...