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. 创建Sqlite数据库(一)

    对这方面的掌握不牢,慢慢深入吧,先执行一个sqlite语句,只会简单的.输出"创建"证明创建成功 public class MainActivity extends AppComp ...

  2. Messenger实现进程间通信(IPC)

    messenger内部也是实现aidl通信,所以可以看做一个轻量级aidl,但相对比较简单.首先开启一个服务并实现一个Handler用来处理消息,在onbind方法中返回IBinder对象,通过Ser ...

  3. ES概要

    ES分布式搜索,依赖了Lucene来提供搜索引擎功能,每个数据节点都是一个Lucene实例,通过将索引进行分片,写入和查询时候操作或查询对应分片,来达到水平扩展的能力 节点 Master node:负 ...

  4. Java中的微信支付(1):API V3版本签名详解

    1. 前言 最近在折腾微信支付,证书还是比较烦人的,所以有必要分享一些经验,减少你在开发微信支付时的踩坑.目前微信支付的API已经发展到V3版本,采用了流行的Restful风格. 今天来分享微信支付的 ...

  5. Kerberos与票据的爱情故事

    0x01.Kerberos认证原理 Kerberos是一种认证机制.目的是通过密钥系统为客户端/服务器应用程序提供强大的可信任的第三方认证服务: 保护服务器防止错误的用户使用,同时保护它的用户使用正确 ...

  6. Verification of WISHBONE I2C Master Core(IRUN+Simvision)

    一.前言 很久没写技术博客了,有些懈怠,生活还得继续折腾.转眼工作一年多,时间越长越发觉得自己知之甚少,当然这跟IC行业技术密集有关.用空余时间在opencores网站上下载些小的IP看看 验证下,让 ...

  7. 记一次微信公众号(微信H5)网页对接腾讯云慧眼人脸核验开发笔记

    需求是这样的,客户需要一个在观看学习视频前弹出人脸识别核验真人的功能,客户找了个APP作为参考,但是在微信上第三方人脸识别是无法直接调取到前置摄像头的,都是通过用户自己获取用户的身份信息或者照片,然后 ...

  8. 给萌新HTML5 入门指南(二)

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上一篇我们已经为大家介绍了HTML5新增的内容和基础页面布局,这篇会继续向大 ...

  9. 2020提高组模拟赛7 StormWind

    StormWind 中文 切换语言(Change Language) 时间:4s   空间:512M 题目描述: 风暴城建造的防线错综复杂,可以抽象成一个有$n$个点$m$条边的有向拓扑图,暴风城的最 ...

  10. 用微信小程序做一个小电商 sku

    效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) ...