根据公司的需求，需要一个对话框来返回给客户的失败原因，刚刚开在百度上搜了老半天，嫩是没有搜索一个自己想要的，后来发送私信给一个博友，经过他哪里找到了自己想要的答案，废话不多说直接看源码：

 <!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">

                              &times;

                          </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模态对话框(最简单)的更多相关文章

  1. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

  2. bootstrap模态对话框

    bootstrap模态对话框 前提是引入bootstrap的css和js的东西 data-backdrop="static"代表的是点击旁边的内容,不进行关闭操作,但是esc的时候 ...

  3. 为Bootstrap模态对话框添加拖拽移动功能

    请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...

  4. JavaScript：bootstrap 模态框的简单应用

    最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...

  5. HTML bootstrap 模态对话框添加用户

    HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> ...

  6. Bootstrap 模态对话框 remote指定内容加载

    第一个页面: .....其他内容..... <div class="modal" id="ID_ReformDetail"> <div cla ...

  7. Bootstrap 模态对话框只加载一次 remote 数据的解决办法

    原文: https://my.oschina.net/qczhang/blog/190215?p=1

  8. [原]经典bootstrap模态框使用文章

    1,Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div ...

  9. 基于bootstrap模态框的二次封装

    一.参数设置 $.beamDialog(options); var defaults = { title:'标题', content:'内容', showCloseButton:true, //显示关 ...

随机推荐

  1. Android中处理大图片时图片压缩

    1.BitmapFactory.Options中的属性 在进行图片压缩时,是通过设置BitmapFactory.Options的一些值来改变图片的属性的,下面我们来看看BitmapFactory.Op ...

  2. C语言之数值计算--级数算法

    在编程语言的学习中,我们学习过不少的算法,比如累加,累乘,数值交换,排序等等.在一些软件比赛和面试题中,有一类算法不容忽视,属于高频题目,我之前去企业面试的时候就遇到这样的一类题目,题目不算难,掌握方 ...

  3. android 股票K线图

    现在在手上的是一个证券资讯类型的app,其中有涉及到股票行情界面,行情中有K线图等,看到网上很多人在求这方面的资料,所以我特地写了一个demo在此处给大家分享一下. 下面是做出来的效果图: 这个 界面 ...

  4. html5标签基础

    1.声明:<!DOCTYPE> HTML有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确的显示出HTML页面,这就是<!DOCTYPE>的用处. ...

  5. navicat里导入和导出.sql文件

    一:Navicat导入MySQL的.sql文件. 打开连接connection,选择你要导入的数据库,双击打开(或者新建一个),然后右键该数据库,选"运行批次任务文件(execute sql ...

  6. iOS开发小技巧总结

    一.NSLog的使用 NSLog在调试的时候,屡试不爽,可是在项目中用的太多,其实是会影响程序性能的,而且程序在非调试模式下也看不到打印,多浪费资源呢?如果程序中使用的太多,发布前删除又是一个麻烦事, ...

  7. Android高效率编码-细节，控件，架包，功能，工具，开源汇总,你想要的这里都有

    Android高效率编码-细节,控件,架包,功能,工具,开源汇总 其实写博客的初衷也并不是说什么分享技术,毕竟咱还只是个小程序员,最大的目的就是对自我的知识积累,以后万一编码的时候断片了,也可以翻出来 ...

  8. 给大家推荐一个python的学习网站 http://www.codecademy.com

    注册之后,可以跟着指导,自己编码学习,比较方面: 再推荐一个在线编译的代码网站,c/c++ python  都可以: http://codepad.org

  9. javascript访问html元素的内容(1)

    形如如下格式的html元素: <p id="my_p">I'm <strong>BIG</strong> panda!!!</p> ...

  10. ruby读取源代码自身的一种方法

    我们知道ruby中如果源代码中一行开头(必须在行的开头)有__END__标示,则表示下面的都是数据行,可以用IO对象DATA来访问这些行.但是如果我们用DATA.rewind一下的话,就可以将文件流指 ...