http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框
做php后端 前端一直不行，但是很多时候 用到ajax都要用到弹框，一直在代码里面找别人弹框来用，终于发现个现成的 ，bootstrap代码复制过来就可以弹框了，对于做后端的，真是太好了。

<!DOCTYPE html>

<html lang="zh-cn">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

    <!-- Button trigger modal -->

        <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">

          Launch demo modal

        </button>

        <!-- Modal -->

        <div class="modal " 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"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title" id="myModalLabel">Modal title</h4>

              </div>

              <div class="modal-body">

                <form role="form">

                    <div class="form-group">

                      <label for="exampleInputEmail1">Email address</label>

                      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

                    </div>

                    <div class="form-group">

                      <label for="exampleInputPassword1">Password</label>

                      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

                    </div>

                    <div class="form-group">

                      <label for="exampleInputFile">File input</label>

                      <input type="file" id="exampleInputFile">

                      <p class="help-block">Example block-level help text here.</p>

                    </div>

                    <div class="checkbox">

                      <label>

                        <input type="checkbox"> Check me out

                      </label>

                    </div>

                  </form>

              </div>

              <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                <button type="button" class="btn btn-primary submit">保存</button>

              </div>

            </div>

          </div>

        </div>

  </body>

</html>

<script type="text/javascript">

  $(".submit").click(function(){

    alert(4444444444);

  })

</script>

bootstrap弹框的更多相关文章

  1. bootstrap 弹框

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  2. bootstrap 弹框使用

    首先需要准备bootstrap.css,bootstrap .js  jquery 我这里有写好的下载地址如下: https://pan.baidu.com/s/1miMahXe  秘钥:tgts & ...

  3. bootstrap弹框去除遮罩层效果

    是通过css解决这个问题,核心css代码如下: .modal-backdrop { filter: alpha(opacity=)!important; opacity: !important; } ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. 自己写的基于bootstrap风格的弹框插件

    自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTP ...

  6. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

  7. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  8. Bootstrap 模态框(也可以说的弹出层)

    最近在尝试使用bootstrap的模态框 使用模态框主要要引入一下几个js和css: bootstrap.css jquery.1.9.1.js(这个可以灵活选择) bootstrap.js html ...

  9. bootstrap弹出框

    要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...

随机推荐

  1. 理解MySQL数据库覆盖索引

    话说有这么一个表: CREATE TABLE `user_group` ( `id` int(11) NOT NULL auto_increment, `uid` int(11) NOT NULL, ...

  2. 转 浅谈算法和数据结构: 十 平衡查找树之B树

    前面讲解了平衡查找树中的2-3树以及其实现红黑树.2-3树种,一个节点最多有2个key,而红黑树则使用染色的方式来标识这两个key. 维基百科对B树的定义为"在计算机科学中,B树(B-tre ...

  3. 在Ubuntu 14.04安装Nginx

    ###介绍 Nginx是世界上最流行的网络服务器中的一种,负责托管网络上一些流量最高的网站.在多数情况下,Nginx比Apache在资源上更加友好,可以作为网络服务器或反向代理服务器. 这篇教程中,我 ...

  4. Elasticsearch 权威指南

    Elasticsearch 权威指南 http://fuxiaopang.gitbooks.io/learnelasticsearch/content/index.html

  5. ActiveMQ_安全配置(五)

    如果Activemq不加安全配置,那么任何知道队列所在服务器IP的人都可以发送接收队列消息 安全配置主要是通过配置账号密码增强安全性 参考资料:http://activemq.apache.org/s ...

  6. 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

    背水一战 Windows 10 之 绑定 通过 Binding 绑定对象 通过 x:Bind 绑定对象 通过 Binding 绑定集合 通过 x:Bind 绑定集合 示例1.演示如何通过 Bindin ...

  7. 最新版CocoaPods的使用与安装－以导入ReactiveCocoa框架为例

    一.什么是CocoaPods?前言: 思考如何引入一个第三方框架. 例如: 百度地图SDK.友盟.ShareSDK. 信鸽推送等.从github或某处下载第三方SDK工程中导入所需要的SDK的文件 . ...

  8. hdu 5229 找规律

    假设选择了字符串a和b: 假设两人都按照最聪明的策略,那么观察一下可以找出规律:当a和b的字符串长度之和为奇数的时候zcc会败. 另外当a==b的时候zcc也会败(当时做的时候忘了这个了T^T) 接下 ...

  9. Linux VFS Extended Attribute And Access Control Table

    catalog . 简介 . 扩展属性 . 访问控制表 . 小结 0. 简介 许多文件系统都提供了一些特性,扩展了VFS层提供的标准功能,虚拟文件系统不可能为所有特性都提供具体的数据结构.超出标准的U ...

  10. Linux File System

    目录 . Linux文件系统简介 . 通用文件模型 . VFS相关数据结构 . 处理VFS对象 . 标准函数 1. Linux文件系统简介 Linux系统由数以万计的文件组成,其数据存储在硬盘或者其他 ...