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

 <!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. Cocos2d中update与fixedUpdate的区别(三)

    没错!现在的情况是很糟糕.因为玩家不会看到平滑的动作. 不管怎样,我们都对此无能为力.玩家期待在1秒后小球出现在位置(8),所以我们应该把球放在那里. 我们不会讨论如何避免掉帧的情况.对于这个例子我们 ...

  2. .NET(C#)连接各类数据库代码-集锦

    1.C#连接连接Access 复制代码代码如下: using System.Data;   using System.Data.OleDb;   ..   string strConnection=& ...

  3. 写一个dup2功能相同的函数，不能调用 fcntl 函数，并且要有出错处理

    实现的时候用到系统原来的dup函数 // mydup2.c // 2015/08/17 Lucifer Zhang version1.0 // write my own dup2 function / ...

  4. obj-c中-fobjc-arc-exceptions的解释

    在开启ARC之后正常情况下一切和内存有关的申请和释放操作皆不用你关心了,ARC全全帮你包办了.但是还有极少数的情况下,编译器无法为你生成合适的ARC额外代码,比如obj-c异常就是这么一个例子. 话句 ...

  5. rails将类常量重构到数据库对应的表中之三

    经过博文之一和之二的重构,貌似代码表现的还不错,正常运行和test都通过鸟,但是,感觉告诉我们还是有什么地方不对劲啊!究竟是哪里不对劲呢?我们再来好好看一下. 我们把数据库表中的支付方式集合直接放在实 ...

  6. WebService学习--(一)webservice相关概念

    一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...

  7. 四种生成和解析XML文档的方法详解

    众所周知,现在解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 下面首先给出这四种方法的jar包下载地址 DOM:在现在的Java JDK里都自带了,在xml- ...

  8. angular1.0 app

    angular 1.0 简单的说一下就是ng启动阶段是 config-->run-->compile/link config阶段是给了ng上下文一个针对constant与provider修 ...

  9. JeeSite中Excel导入导出

    在各种管理系统中,数据的导入导出是经常用到的功能,通常导入导出以Excel.CSV格式居多.如果是学习的过程中,最好是自己实现数据导入与导出的功能,然而在项目中,还是调用现成的功能比较好.近期一直使用 ...

  10. 新装的主机没有ifconfig,route等命令，怎么查找对应的安装包

    公司最近有台新装的主机,主机上一些常用的命令都没有,比如说ifconfig,route等命令. 没有这些命令主机很难工作,所以我们就需要把他安装上 第一种方法:是你需要知道对应的是那个包 比如说ifc ...