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提供的单 ...
随机推荐
- python的deque(双向)队列详解
首先 python的队列有很多种 Python标准库中包含了四种队列,分别是queue.Queue / asyncio.Queue / multiprocessing.Queue / collecti ...
- zk配置文件详解
zookeeper的默认配置文件为zookeeper/conf/zoo_sample.cfg,需要将其修改为zoo.cfg.其中各配置项的含义,解释如下: 1.tickTime:CS通信心跳数 Zoo ...
- 【应用服务 App Service】App Service证书导入,使用Key Vault中的证书
问题描述 正常情况下,如果需要为应用服务安装SSL证书,可以在证书准备好的情况,通过门户上传即可,详细步骤可以参考微软官方文档(在 Azure 应用服务中添加 TLS/SSL 证书:https://d ...
- vue+el-table在ajax分页时支持全选单页和全选所有
需求:el-table中,ajax分页的情况下,要支持全选单页和全选所有页中的记录,效果如下图所示: 界面代码: <el-table :data="tableDat ...
- 利用VS2017制作软件安装包与卸载程序
本博客讲述如何利用VS2017制作安装包以及相应的卸载程序,并解决过程中可能遇到的问题 一.制作安装程序 1.打开VS2017,新建项目,选择如下图所示程序: 新建成功后,会出现如下图所示目录: 2. ...
- vue API 知识点(1)---全局 API 总结
1.Vue.extend(options) 构造器,创建一个 子类 .参数是一个包含组件选项的对象 data 选项是特例,需要注意 在 Vue.extend() 中它必须是一个函数, <div ...
- 常用的Linux命令,日常收集记录
1.# yum install -y xxxx 解释:install代表往系统中安装一个或者多个软件包:-y 代表回答全部问题为是 2.# ps -ef | grep yum (根据进程名来查看进 ...
- vgg学习
LeNet-5是一个较简单的卷积神经网络.下图显示了其结构:输入的二维图像,先经过两次卷积层到池化层,再经过全连接层,最后使用softmax分类作为输出层. AlexNet中包含了几个比较新的技术点, ...
- 3.2spring源码系列----循环依赖源码分析
首先,我们在3.1 spring5源码系列--循环依赖 之 手写代码模拟spring循环依赖 中手写了循环依赖的实现. 这个实现就是模拟的spring的循环依赖. 目的是为了更容易理解spring源码 ...
- Java 实现输入公历日期输出农历日期、生肖、天干地支、节日、节气等信息
最近的工作中客户要求前台页面展示日历,日历内容包括:农历年月日日.公历年月日.生肖.天干地支.农历节日.公历节日.24节气等信息,之前在网上查找资料关于Java实现方面的文章不少,但是大多数针对节气. ...