<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 模态框（Modal）插件</title>

    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  //样式必须有，可以在这个地址下载

    <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>                 //Jquery库，建议高一点

    <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>        //bootstrap库

</head>

<body>

<h2>创建模态框（Modal）</h2>

<!-- 按钮触发模态框 -->

<button id="view">自己手动调用莫态</button>   //自己手动调用

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">   //属性data-toggle和data-target就是触发模态框的属性

    开始演示模态框

</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" id="hh">

                在这里添加一些文本 （这里就是我们可以做处理的位子）

            </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>

//自己手动调用  注意两个事件   模态框显示之前，隐藏时发生  这两个事件

//主要逻辑： 模态框在显示之前把需要操作的类容加载到模态框中，  隐藏时清空模态框

<script>

　　$(function(){

          $("#myModal").modal({ backdrop: "static", keyboard: false });

          $("#myModal").modal("hide"); //这个需要最后写

          $("#myModal").on("hidden.bs.modal", function () {

           $(this).removeData("modal"); //清除数据 当模态框对用户隐藏时发生

         $("#view").click(function(){

               $("#myModal1").modal("show");  //显示模态框

         });

        //模态框显示之前需要做什么在里面写就行

　　      $("#myModal").on("show.bs.modal", function () {

                 //例如：异步去加载需要修改的信息

                $.ajax({

　　　　　　　　　　type: "get",

　　　　　　　　　　url: "@Url.Action("EditProductType")",

　　　　　　　　　　data: { id: EditTypeID },

　　　　　　　　　　success: function (data) {

　　　　　　　　　　　　$("#hh").html(data);

　　　　　　　　　　},

                 error:function(){

                    alert("失败了");

                  }

               });

            });

        });

   }）

</script>

bootstrap的模态框的更多相关文章

  1. Bootstrap 3 模态框播放视频

    Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...

  2. Bootstrap 实例 - 模态框（Modal）插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. Bootstrap -- 插件: 模态框、滚动监听、标签页

    Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...

  4. Bootstrap中模态框多层嵌套时滚动条问题

    在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...

  5. 黄聪：bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  6. layui实现类似于bootstrap的模态框功能

    以前习惯了bootstrap的模态框,突然换了layui,想的用layui实现类似于bootstrap的模态框功能. 用到了layui的layer模块,例如: <!DOCTYPE html> ...

  7. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

  8. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  9. bootstrap删除模态框弹出并询问是否删除【通用删除模态框】

    普通的询问是否删除的对话框比较low,可以利用bootstrap的模态框代替普通的对话框来实现删除. 效果: 点删除的时候弹出模态框询问是否删除,点确认的时候将需要删除的ID传到后台进行删除.  过程 ...

随机推荐

  1. javascript实现继承3种方式： 原型继承、借用构造函数继承、组合继承，模拟extends方法继承

    javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...

  2. 基于JWT标准的用户认证接口实现

    前面的话 实现用户登录认证的方式常见的有两种:一种是基于 cookie 的认证,另外一种是基于 token 的认证 .本文以基于cookie的认证为参照,详细介绍JWT标准,并实现基于该标签的用户认证 ...

  3. React-Native（五）：React Native之Text学习

    本章节主要学习Text的布局,仿照网易新网: 代码: /** * Sample React Native App * https://github.com/facebook/react-native ...

  4. mysql安装及常见问题

    下载了MySQL的压缩包,开始配置的时候遇到一大堆问题,下面记录下,也希望对遇到同样问题的你有帮助 开始将压缩包解压到指定文件夹,然后建立一个txt文件命名为my.ini,写入下面的内容 [mysql ...

  5. 《Java面向对象设计》

    <Java面向对象设计> 第一章 面向对象软件工程与UML p理解为什么需要软件工程 p掌握软件工程的基本概念 p掌握软件生命周期各个阶段的主要任务 p了解流行软件开发过程 p了解软件过程 ...

  6. Cassanfra、Hbase和MongoDB的选取

    HBase比较中庸些,适合各种场景: Cassandra适合读写分离的场景,写入场景使用Cassandra,比如插入操作日志,或领域事件日志的写入: 而MongoDB适合做读写分离场景中的读取场景. ...

  7. [持续开源]基于nodejs+ligerui的一款mongodb web 端查询工具（MongoStudio）

    这是我2015年入猫酷写的一款内部工具,目的是为了开发人员可以查询数据库数据以调查线上bug,数据不仅限业务数据及日志数据,其目的是为了避免开发人员直接链接生产环境数据库,以免误操作影响生产. 当时是 ...

  8. HDFS简介及相关概念

    HDFS简介: HDFS在设计时就充分考虑了实际应用环境的特点,即硬件出错在普通服务集群中是一种常态,而不是异常. 因此HDFS主要实现了以下目标: 兼容廉价的硬件设备 HDFS设计了快速检测硬件故障 ...

  9. Unity依赖注入

    一.简介 Unity是一个轻量级的可扩展的依赖注入容器,支持构造函数,属性和方法调用注入.Unity可以处理那些从事基于组件的软件工程的开发人员所面对的问题.构建一个成功应用程序的关键是实现非常松散的 ...

  10. geotrellis使用（三十九）COG 写入更新

    前言 前面介绍过了如何在 ETL 的时候更新 Layer,使得能够在大数据量的时候完成 ETL 操作,同时前两篇文章也介绍了 COG 以及如何在 Geotrellis 中实现 COG 的读取.本文介绍 ...