模态框----Bootstrap Modals基础使用详解
来源:互联网 发布:淘宝网单层不锈钢大水 编辑:程序博客网 时间:2024/05/21 00:46
最近项目中用到了Bootstrap模态框,收录下来:
一、引用的文件
前提是需要引用jquery哦:
<script src="plugins/bootstrap-modal/js/bootstrap-modal.js" type="text/javascript"></script>
二、举例样式
三、html引用规则
<div class="modal fade" id="dia_delay" tabindex="-1" aria-hidden="true" data-width="700px">
<div class="modal-titleblack">
<span><spring:message code="system.tenantManage.delay" /></span>
<span class="modal-close"><i class="fa fa-times-circle-o" data-dismiss="modal" aria-hidden="true"></i></span>
</div>
<div class="modal-body">
<div class="scroller" style="height:100px" data-always-visible="1" data-rail-visible1="1">
<table class="table tableDiv">
<thead>
<tr>
<th><spring:message code="system.tenantManage.name" /></th>
<th><spring:message code="system.tenantManage.contact" /></th>
<th><spring:message code="system.tenantManage.serviceContent" /></th>
<th><spring:message code="system.tenantManage.duetime" /></th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"></td>
<td class="email"></td>
<td class="catalognum"></td>
<td class="duetime"></td>
</tr>
</tbody>
</table>
<div class="delayDiv">
<label class="control-label"><spring:message code="system.tenantManage.duetimeTo" />:
</label>
<div class="">
<div class="input-group input-medium date date-picker" data-date-format="yyyy-mm-dd" data-date-start-date="+0d">
<input type="text" class="form-control inputWidth" name="dueTime">
<span class="input-group-btn">
<button class="btn default dateBtn" type="button"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn red" data-dismiss="modal" aria-hidden="true" onclick="changeDueTime()"><spring:message code="common.confirm"/></button>
<button class="btn white" data-dismiss="modal" aria-hidden="true"><spring:message code="common.cancel"/></button>
</div>
</div>
解释
/jquery/1.7.1/jquery.min.js"></script>引用 Jquery 文件。<script src="../bootstrap/twitter-bootstrap-v2>
/js/bootstrap-modal.js"></script>引用 bootstrap modal(模态框)的 JS 文件。
注释:实际中不同的模态框的长宽是不一样的,在class="modal"的div中设置data-width/data-heigth是整个模态框的。而内容对应显示时要对应设置class="modal-body"的heigth值。
四、js操作
如果设置了modal的display:none.那么起初是看不到该模态框的。
使用
$("#dia_delay").modal('show'); 来打开模态框。
五、对于模态框的按钮监
不同的按钮可以设置监听事件好了
- 模态框----Bootstrap Modals基础使用详解
- Bootstrap Modals(模态框)
- Bootstrap Modals(模态框)
- js学习之--Bootstrap Modals(模态框)
- Bootstrap库之Modals
- bootstrap中的modals
- Bootstrap库之Modals
- Bootstrap 模态弹出框(Modals)
- bootstrap datatable使用详解
- bootstrap fileupload 使用详解~~
- bootstrap使用详解
- Bootstrap基础日期控件使用
- bootstrap-star-rating使用详解
- Bootstrap 模态框的使用
- Bootstrap模态框使用问题
- Bootstrap使用模态框
- BootStrap模态框使用
- bootstrap selectpicker 下拉框使用详解
- OpenGL - Lighting
- 1127 -- 计算阶乘和
- 深入Python(4):深拷贝和浅拷贝
- Shell替换:变量替换,命令替换,转义字符
- 利用core 文件查找嵌入式程序中的溢出点
- 模态框----Bootstrap Modals基础使用详解
- C#把UNICODE编码转换为GB编码
- TextView内容中给部分设置字体颜色或大小
- 标题:伸展树的基本操作:
- 关于List集合使用 Linq 操作问题
- ssh用户等效性配置
- xUtils中DBUtils 数据库版本升级 说明
- Java中有关Null的9件事
- 单例模式 详解