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

 <!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. (Struts2)XWork容器的实现机理

    模板方法----callInContext 翻开ContainerImpl的实现,我们可以看到callInContext,这个模板方法是容器所有操作调用的基础. 关于模板方法模式,大家可以看出刘伟老师 ...

  2. node.js 连接数据库

    用Nodejs连接MySQL 用Nodejs连接MySQL 从零开始nodejs系列文章 ,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的 ...

  3. SpannableString 给TextView添加不同的显示样式

    TextView是用来显示文本的,有时需要给TextView中的个别字设置为超链接,或者设置个别字的颜色.字体等,那就需要用到Spannable对象,可以借助Spannable对象实现以上设置 myT ...

  4. Chrome浏览器开发调试系列(一)

    // 计划写一个 Chrome 浏览器以及 调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方. // 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更 ...

  5. C++中重载、覆盖与隐藏的区别（转）

    本文摘自林锐博士的<高质量C++/C编程指南>. 成员函数的重载.覆盖(override)与隐藏很容易混淆,C++程序员必须要搞清楚概念,否则错误将防不胜防. 1.重载与覆盖 成员函数被重 ...

  6. Android实训案例（五）——四大组件之一ContentProvider的使用，通讯录的实现以及ListView的优化

    Android实训案例(五)--四大组件之一ContentProvider的使用,通讯录的实现 Android四大组件是啥这里就不用多说了,看图吧,他们之间通过intent通讯 我们后续也会一一的为大 ...

  7. 数据结构-C语言递归实现树的前中后序遍历

    #include <stdio.h> #include <stdlib.h> typedef struct tree { int number ; struct tree *l ...

  8. 【程序员札记#学习&&塑形# 】2018年5月04号

      回顾   工作:pendding 学习:看算法导论第一章,leetcode还在做(本身翻译错误,被误导了). 体会: 1) 浩俊之前推荐让我看的<算法导论>,昨天再回过头看,里面很多确 ...

  9. 什么是shell? bash和shell有什么关系?

    什么是shell? bash和shell有什么关系? 博客分类: Linux   什么是Shell?      shell是你(用户)和Linux(或者更准确的说,是你和Linux内核)之间的接口程序 ...

  10. 如何用Go语言实现汉诺塔算法

    package main import ( "fmt" ) func print(n int,x rune,y rune)(){ fmt.Printf("moving d ...