bootstrap模态对话框(最简单)
根据公司的需求，需要一个对话框来返回给客户的失败原因，刚刚开在百度上搜了老半天，嫩是没有搜索一个自己想要的，后来发送私信给一个博友，经过他哪里找到了自己想要的答案，废话不多说直接看源码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body> <h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<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">
<input type="text"/>
在这里添加一些文本
</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>
</body>
</html>
或者http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html进这个网站
或者直接百度搜索:bootstrap的modal框
bootstrap模态对话框(最简单)的更多相关文章
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载
http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...
- bootstrap模态对话框
bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...
- 为Bootstrap模态对话框添加拖拽移动功能
请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...
- JavaScript：bootstrap 模态框的简单应用
最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...
- HTML bootstrap 模态对话框添加用户
HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ...
- Bootstrap 模态对话框 remote指定内容加载
第一个页面: .....其他内容..... <div class="modal" id="ID_ReformDetail"> <div cla ...
- Bootstrap 模态对话框只加载一次 remote 数据的解决办法
原文: https://my.oschina.net/qczhang/blog/190215?p=1
- [原]经典bootstrap模态框使用文章
1,Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div ...
- 基于bootstrap模态框的二次封装
一.参数设置 $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:true, //显示关 ...
随机推荐
- java工具类(三)之生成若干位随机数
java 生成若干位随机数的问题 在一次编程的过程中偶然碰到一个小问题,就是需要生成一个4位数的随机数,如果是一个不到4位大的数字,前面可以加0来显示.因为要求最后是一个4位的整数,不带小数点.当时就 ...
- Java集合之TreeSet
TreeSet是一个有序的集合,它的作用是提供有序的Set集合.它继承了AbstractSet抽象类,实现了NavigableSet<E>,Cloneable,Serializable接口 ...
- STL - stack（栈）
Stack简介 stack是堆栈容器,是一种"先进后出"的容器. stack是简单地装饰deque容器而成为另外的一种容器. #include <stack> stac ...
- Java-HttpSession
//session给用户一种标志,让用户可以在不同页面以及网站中都有一个特殊的标记 public interface HttpSession { /** * Returns the time when ...
- ExtJS：菜单ComboBox及级联菜单应用
首页一级菜单查询分组,二级菜单查询分组中的车辆信息. 定义分组数据模型: Ext.define( 'group', { extend:'Ext.data.Model', fields:[ {name: ...
- Android特效专辑（七）——飞机升空特效，一键清理缓存，灵活运用动画会有不一样的感受
Android特效专辑(七)--飞机升空特效,一键清理缓存,灵活运用属性动画 最近的几篇博文反响还不错,也会继续的写下去的,关于这些特效的专辑,大多数也是借鉴大神的,最近由于工作的关系,会深入的了解一 ...
- Google主推-Android开发利器——Android Studio，这可能是最全的AS教程！
Android Studio使用手册 "工欲善其事必先利其器" 作为一个Android开发人员来说,一款好的开发工具也是相当重要的,在相当长的时间礼,Google都是基于Eclip ...
- MongoDB之整库备份还原单表collection备份还原
MongoDB之整库备份还原单表collection备份还原 cd D:\MongoDB\bin 1整库备份: mongodump -h dbhost -d dbname -o dbdirectory ...
- [Zabbix3.0] 添加MySQL监控
zabbix3.0 server已经自带MySQL的模板了,只要修改agent端,然在web端给主机添加模板就好了. Agent端操作 /etc/zabbix/zabbix_agentd.d/user ...
- ruby中顶层定义的方法究竟放在哪里？
ruby中顶层(top level)中定义的方法放在main中,证明如下: self.private_methods(false) #IN TOP LEVEL 那么methods方法究竟是在哪定义的, ...