yii2.0 模态框简单使用
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 模态框简单使用的更多相关文章
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- JS模态框 简单案例
演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
- bootstrap3.0 模态框显示的文字超出怎么办
版本:bootstrap3.3 模态框文字超出 解决方案: 在html中控制自动换行 其实只要在表格控制中添加一句<div style="word-break:break-all& ...
- [YII2.0] 高级模板简单安装教程
YIICHINA官网教程就很完善:http://www.yiichina.com/tutorial/692 但是在yii2框架安装运行init.bat报错php.exe不是内部或外部命令, 解决办法: ...
- [moka同学笔记]yii2.0 dropdownlist的简单使用(一)
1.controller控制中 $modelCountrytelCode = CountryTelCode::find()->orderBy('id DESC')->all(); $tel ...
- yii2.0场景的简单使用
一.规则中使用场景规则场景的使用模型层public function rules(){ return [ [['name','product_id'],'required','on'=>'add ...
- bootstrap模态框传值操作
1.bootstrap模态框之html代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"& ...
- JavaScript:bootstrap 模态框的简单应用
最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...
- Bootstrap3.0学习教程十七:JavaScript插件模态框
这篇文章中我们主要来学习一下JavaScipt插件模态框.在学习模态框之前,我们先来了解一下JavaScript插件吧. JavaScript插件概览 插件可以单个引入(使用Bootstrap提供的单 ...
随机推荐
- Redis学习笔记(九)——集群
一.概述 Redis Cluster与Redis3.0.0同时发布,以此结束了Redis无官方集群方案的时代. Redis Cluster是去中心化,去中间件,也就是说,集群中的每个节点都是平等的关 ...
- 关于查看本机ssh公钥以及生成公钥
1.查看本机公钥: 打开git bush,执行 cd ~/.ssh 进入.ssh文件夹(C:\Users\Administrator\.ssh) 执行 ls 命令,查看列表 执行 cat id ...
- 【转】Setting up SDL Extension Libraries on MinGW
FROM:http://lazyfoo.net/tutorials/SDL/06_extension_libraries_and_loading_other_image_formats/windows ...
- 撸个反向代理,激活JRebel~
持续原创输出,点击上方蓝字关注我 目录 前言 本地反向代理 服务器反向代理[个人推荐] IDEA安装JRebel并激活 服务器安装JRebel并激活 总结 前言 热部署相信大家都听说过,比如Sprin ...
- Java-GUI基础(一)
简介 首先,Java的学习就是不断学习一个个包与类的过程,对于GUI部分有两个核心包:java.awt与javax.swing, 这两个包可以说是涵盖了java的GUI部分所有的类(和他们的方法). ...
- pip install kaggle 出现 【网络不可达】?
解决办法: pip install kaggle -i http://pypi.douban.com/simple --trusted-host pypi.douban.com
- CC模型加载太慢?一招破解!
伴随无人机性能的提升,单个项目涉及到的倾斜摄影数据范围不断扩大,模型的数据量越来越大,在同配置机器上的显示速度也相应的越来越慢,那么如何在不升级配置的情况下提升模型的加载速度呢? 01 百GB倾斜摄影 ...
- Vue常用性能优化
Vue常用性能优化 Vue常用的一些优化方式,主要是在构建项目过程需要注意的方面. 编码优化 避免响应所有数据 不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并 ...
- Python--安装 PyQt5, pyqt5-tools
# 使用豆瓣镜像源 anaconda prompt界面里输入: pip install pyqt5-tools -i https://pypi.douban.com/simple/
- 聊聊Spark的分区、并行度 —— 前奏篇
通过之前的文章[Spark RDD详解],大家应该了解到Spark会通过DAG将一个Spark job中用到的所有RDD划分为不同的stage,每个stage内部都会有很多子任务处理数据,而每个sta ...