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. Linux下安装libiconv使php支持iconv函数

    libiconv组件安装好了可以让我们php支持iconv函数了,这个函数的作用就是字符编码强制转换了,下面和111cn小编一起来看一个Linux中安装libiconv使php支持iconv函数的例子 ...

  2. 如何调试js文件

    来源于:http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code http://stackoverflo ...

  3. ubuntu下nginx的启停等常用命令

    开发过程中,我们会经常的修改nginx的配置文件,每次修改配置文件都可以先测试下本次修改的配置文件是否正确,可以利用以下命令: ? 1 service nginx -t -c /alidata/ser ...

  4. bzoj1051

    就是一个tarjan #include<iostream> #include<stack> #include<cstdio> using namespace std ...

  5. java.net.URLConnectioin的http(get,post)请求(原生)

    使用Java发送这两种请求的代码大同小异,只是一些参数设置的不同.步骤如下: 通过统一资源定位器(java.net.URL)获取连接器(java.net.URLConnection) 设置请求的参数 ...

  6. ArrayList实现线程的几种方法

    第一种.给方法名加synchronized Public synchronized void method(){ //-. } 第二种 New synchronized arraylist(); 第三 ...

  7. bzoj2565: 最长双回文串

    manacher之后乱搞 #include <iostream> #include <cstdio> #include <cstring> #include < ...

  8. C#变量类型

    在C#语言中,我们把变量分为七种类型,它们分别是:静态变量(static varibles),非静态变量(instance variables),数组元素(array elements),值参数(va ...

  9. Hackerrank Going to the Office

    传送门 Problem Statement Ms.Kox enjoys her job, but she does not like to waste extra time traveling to ...

  10. 树链剖分I 原理

    树链剖分(Heavy Light Decomposition, HLD)是一种将对[树上两点间的路径]上[边或点]的[修改与查询]转化到[序列]上来处理的方法. 目的:将树的边或点转化到一个线性结构( ...