源模态框使用: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">&times;</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 --对话框及提示框的处理和优化的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

  2. (转)基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

    http://www.cnblogs.com/wuhuacong/p/4775282.html 在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验 ...

  3. 【转】js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.js的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

  4. js js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

  5. js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 funct ...

  6. bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify

    Bootstrap简单好用的页面右上角咆哮提示框 - daidaineteasy的专栏 - CSDN博客https://blog.csdn.net/daidaineteasy/article/deta ...

  7. 转载 js弹出框、对话框、提示框、弹窗总结

    转载:https://blog.csdn.net/huileiforever/article/details/9464659 一.JS的三种最常见的对话框   //================== ...

  8. JavaScript学习总结(6)——js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 =================== ...

  9. 奥展项目笔记06--js弹出框、对话框、提示框、弹窗总结

    JS的三种最常见的对话框: //====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 functi ...

随机推荐

  1. [小知识] 关闭我的电脑里面的百度网盘以及修改win+e快捷键打开我的电脑

    1. 登录百度云盘客户端 设置->基本->取消在我的电脑中显示百度网盘 2. 修改win+e的默认显示 打开我的电脑. 选择查看-选项 文件夹选项修改为: 此电脑即可..

  2. [日常工作] Inspur 服务器安装ESXi的简单过程

    1. 公司里面使用虚拟化来进行功能测试 性能测试, 现阶段和之前主要是用虚拟机来搞. 前期用过hyperV 但是感觉 没有SystemCenter的VMM的授权比较难搞一些. 所以还是用ESXi的多了 ...

  3. Cmder 常用配置

    windows 系统的 cmd 命令窗口不是很好用,可以试试 Cmder 工具包. 1.在运行框中快速启动 Cmder 将 cmder.exe 文件所在目录加载环境变量 PATH 中. 2.把 cms ...

  4. centos7切换gnome3桌面与gnome经典桌面

    登陆界面选择设置按钮,选择gnome,进行登陆

  5. using 的三种使用方式

    using 关键字有两个主要用途: 作为指令:用于为命名空间创建别名或导入在其他命名空间中定义的类型. 作为语句:用于定义一个范围,在此范围的末尾将释放对象. 此外,使用 using 静态指令可定义一 ...

  6. Oracle数据库导入导出 imp/exp备份还原

    Oracle数据导入导出imp/exp   Oracle数据导入导出imp/exp 在cmd的dos命令提示符下执行,而不是在sqlplus里面,但是格式一定要类似于:   imp/exp 用户名/密 ...

  7. LODOP弹出对话框获取保存文件的路径

    通常一般不会让用户自己在文本框里填上路径,因为路径要输入字母字符等比较麻烦,而且用户硬盘里文件很多,也不知道要保存在哪里,LODOP可以弹出一个选择保存路径的弹窗,然后把返回选择的路径值.这样用户就可 ...

  8. maven依赖有一个步长原则 如果a 对 b和c都有依赖 如果b的步长近则使用b的

    maven依赖有一个步长原则 如果a 对 b和c都有依赖 如果b的步长近则使用b的

  9. 荣耀实锤Magic2或将助力AI,再次带动成长?

    临近年底,热闹了一年的手机圈纷纷偃旗息鼓,准备为明年3月的新品发力.然而今天(12月7日),恰逢节气大雪,@荣耀手机 在微博发布了一张预热海报,随后荣耀总裁赵明转发这条微博表示「关于技术,真的有很多话 ...

  10. Spring AOP动态代理原理与实现方式

    AOP:面向切面.面向方面.面向接口是一种横切技术横切技术运用:1.事务管理: (1)数据库事务:(2)编程事务(3)声明事物:Spring AOP-->声明事物   2.日志处理:3.安全验证 ...