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, //显示关 ...
随机推荐
- mysql进阶(八)怎么对varchar类型排序问题
MySQL中怎么对varchar类型排序问题 asc 升级 desc降序 在mysql默认order by 只对数字与日期类型可以排序,但对于varchar字符型类型排序好像没有用了,下面我来给各位同 ...
- 2014新年福利，居然有人将Ext JS 4.1的文档翻译了
原文:http://damoqiongqiu.iteye.com/blog/1998022
- TCP中的MSS解读（转）
本文摘录自TCP中的MSS解读. MSS 是TCP选项中最经常出现,也是最早出现的选项.MSS选项占4byte.MSS是每一个TCP报文段中数据字段的最大长度,注意:只是数据部分的字段,不包括TCP的 ...
- Hadoop家族
现在Hadoop家族产品,已经达到20个了之多. 有必要对自己的知识做一个整理了,把产品和技术都串起来.不仅能加深印象,更可以对以后的技术方向,技术选型做好基础准备. 本文为"Hadoop家 ...
- html5标签基础
1.声明:<!DOCTYPE> HTML有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确的显示出HTML页面,这就是<!DOCTYPE>的用处. ...
- PS 滤镜算法原理——碎片效果
%%% Fragment %%% 对原图做四个方向的平移,然后对平移的结果取平均 %%% 碎片效果 clc; clear all; Image=imread('4.jpg'); Image=doubl ...
- unity C#更改系统默认鼠标指针
最近项目需要替换鼠标的默认图标,实现的效果是初始状态为一种图标,点击鼠标左键要换成另一种图标,按网上通用的方法做了以后,隐藏鼠标指针,在指针的位置画一个图片就可以了,但不知道怎么回事,这种方法画的图标 ...
- rails项目编写中的一些小技巧小心得
1. 如果form中有数据要传回服务器可以用隐藏属性的控件: form_for(xxx) do |f| f.hidden_field :xxx,value:xxx end 2. 如果你需要一些信息放在 ...
- LambdaToSql 发布 兰姆达转换sql
文档目录索引 查询.函数.分组.排序.分页 添加 Insert into 编辑 Update set 删除 Delete 生成实体 内置常用工具类库 文档完善中... 事务处理 Join 连接查询 ...
- Java复习2.程序内存管理
前言: 国庆节的第三天,大家都回家了,一个人在宿舍好无聊.不过这年头与其说是出去玩不如是说出去挤,所以在学校里还是清闲的好.找工作不用担心了,到时候看着你们慢慢忙:插个话题,大学都没有恋爱过,总之各种 ...