Bootstrap --对话框及提示框的处理和优化
源模态框使用:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
也可参考:http://www.cnblogs.com/wuhuacong/p/4775282.html
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">
<i class="icon-pencil"></i>
<span id="lblAddTitle" style="font-weight:bold">添加信息</span>
</h4>
</div>
<form class="form-horizontal form-bordered form-row-strippe" id="ffAdd" action="" data-toggle="validator" enctype="multipart/form-data">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-2">父ID</label>
<div class="col-md-10">
<select id="PID" name="PID" type="text" class="form-control select2" placeholder="父ID..." ></select>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-2">名称</label>
<div class="col-md-10">
<input id="Name" name="Name" type="text" class="form-control" placeholder="名称..." />
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-2">备注</label>
<div class="col-md-10">
<textarea id="Note" name="Note" class="form-control" placeholder="备注..."></textarea>
</div>
</div>
</div> </div>
</div>
<div class="modal-footer bg-info">
<input type="hidden" id="ID" name="ID" />
<button type="submit" class="btn blue">确定</button>
<button type="button" class="btn green" data-dismiss="modal">取消</button>
</div>
</form>
</div>
</div>
</div>
Bootstrap --对话框及提示框的处理和优化的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...
- (转)基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化
http://www.cnblogs.com/wuhuacong/p/4775282.html 在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验 ...
- 【转】js弹出框、对话框、提示框、弹窗总结
js弹出框.对话框.提示框.弹窗总结 一.js的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...
- js js弹出框、对话框、提示框、弹窗总结
js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...
- js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...
- bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify
Bootstrap简单好用的页面右上角咆哮提示框 - daidaineteasy的专栏 - CSDN博客https://blog.csdn.net/daidaineteasy/article/deta ...
- 转载 js弹出框、对话框、提示框、弹窗总结
转载:https://blog.csdn.net/huileiforever/article/details/9464659 一.JS的三种最常见的对话框 //================== ...
- JavaScript学习总结(6)——js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 =================== ...
- 奥展项目笔记06--js弹出框、对话框、提示框、弹窗总结
JS的三种最常见的对话框: //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 functi ...
随机推荐
- [转帖]GitHub上整理的一些工具
GitHub上整理的一些工具 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 inf ...
- Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 6. 条件
前面的教程中,我们已经可以让小海龟绘制出各种图形了.但是,所有绘图的代码都是预先编好的,程序一旦运行起来,运行结果(绘制的图形)就是固定不变的.这一节中,咪博士将教大家如何让海龟响应用户的输入. im ...
- 《mysql从入门到精通》提高
第一 游标的使用 delimiter $$ DROP PROCEDURE IF EXISTS product_in_sheet_handler; CREATE PROCEDURE product_in ...
- Java 死锁
什么是死锁? 当一个线程永远地持有一个锁,并且其他线程都尝试去获得这个锁时,那么它们将永远被阻塞,当线程A持有锁1想获取锁2,当线程B持有锁2想获取锁1 这种情况下就会产生2个线程一直在阻塞等待其他线 ...
- rabbitmq使用报错总结
最近公司重构服务器架构,需要用到rabbitmq,在公司搞了一个下午还是连接不上,后来细看了英文说明,测试连接成功,得出如下报错几点. 我用的安装包:otp_win64_21.3.exe(erlang ...
- C#實現XML的增刪查改
命名空間:using System.Xml; 1.查找某個節點是否存在: private XmlDocument xmldoc; private string mod="1"; p ...
- html 列表 ol 、ul 、dl
html的列表分為無序列表(ul).有序列表(ol).自定義列表(dl). 無序列表: 以<ul>開始,列表項以<li>開始: 列表項可以是段落.圖像.連接.換行符.列表等: ...
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- Luogu4512 【模板】多项式除法(多项式求逆+NTT)
http://blog.miskcoo.com/2015/05/polynomial-division 好神啊! 通过翻转多项式消除余数的影响,主要原理是商只与次数不小于m的项有关. #include ...
- QAU 18校赛 J题 天平(01背包 判断能否装满)
问题 J: 天平 时间限制: 1 Sec 内存限制: 128 MB提交: 36 解决: 9[提交][状态][讨论版][命题人:admin] 题目描述 天平的右端放着一件重量为w的物品.现在有n个重 ...