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. 高精度算法求n阶阶乘

    1 #include "stdio.h" 2 #include "String.h" 3 #define MAX 10000 4 int f[MAX]; 5 v ...

  2. Hive 建模

    date: 2020-05-24 17:55:00 updated: 2020-06-15 11:19:00 Hive 建模 1. 存储格式 textFile sequenceFile:一种Hadoo ...

  3. pxe装机部署

    批量全自动安装操作系统 dhcp:自动分配IP tftp:微系统安装系统 httpd:网络源 检查环境(永久性关闭selinux) setenforce 0 sed -i s/=enforcing/= ...

  4. Java安全之Commons Collections7分析

    Java安全之Commons Collections7分析 0x00 前言 本文讲解的该链是原生ysoserial中的最后一条CC链,但是实际上并不是的.在后来随着后面各位大佬们挖掘利用链,CC8,9 ...

  5. 定位流之z-index属性

    1.固定定位是脱离标准流的,不会占用标准流的空间 2.和绝对定位有点像,也不区分行内块级元素 3.类似于前面学的背景关联方式(让某个背景图片不随滚动而滚动)让某个元素不随着滚动条的滚动而滚动 ie6不 ...

  6. AtCoder Beginner Contest 181 题解

    总结 第一次 \(AK\ ABC\) 的比赛,发一个截图纪念一下 A - Heavy Rotation 题目大意 一个人一开始穿白衣服,一天后换成黑衣服,再过一天又换成白衣服,问第 \(n(n \le ...

  7. uniapp微信小程序获取当前用户手机号码(前端)

    按钮触发获取用户信息 uniapp中与微信小程序官网所写会不同, <button open-type="getPhoneNumber" @getphonenumber=&qu ...

  8. .netcore简单集成swagger

    为什么要集成Swagger 在前后端分离比较普遍的当下,当后端开发完接口后,还需把接口的信息.参数说明.返回参数等信息编写好提供给调用者.对于对外开放接口需提供说明文档是必不可少的.但是对于内部开发, ...

  9. mysql处理查询请求的步骤

    服务端处理客户端的查询请求大致需要三个步骤: 连接管理 客户端连接服务端时,服务端会为其分配一个线程,客户端断开连接不会回收线程(避免频繁创建销毁的性能问题),服务端一直等待客户端发来消息(文本消息) ...

  10. 快速了解阿里微服务热门开源分布式事务框架——Seata

    一.Seata 概述 Seata 是 Simple Extensible Autonomous Transaction Architecture 的简写,由 feascar 改名而来. Seata 是 ...