专栏首页lgp20151222bootstrap的模态框

bootstrap的模态框

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 排序算法对比,步骤,改进,java代码实现

    发现是时候总结一番算法,基本类型的增删改查的性能对比,集合的串并性能的特性,死记太傻了,所以还是写在代码里,NO BB,SHOW ME THE CODE!

    ydymz
  • 前端延迟加载

    由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面。

    ydymz
  • 树的遍历--树的广度遍历(层次遍历),深度遍历(前序遍历,中序遍历,后序遍历的递归和非递归实现)

    由于本人的码云太多太乱了,于是决定一个一个的整合到一个springboot项目里面。

    ydymz
  • 前端之bootstrap模态框

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

    互联网金融打杂
  • bootstrap 模态框 弹出框

    ('#identifier').modal('show') 显示 $('#identifier').modal('hide') 隐藏

    用户5760343
  • 66. Vue 结合webpack使用jquery以及boostrap

    有时候在 Vue 框架开发的时候,还是存在需要使用 jquery 以及 boostrap 的场景的,这个时候就需要安装 Jquery 以及 boostrap 了...

    Devops海洋的渔夫
  • Bootstrap 模态框(Modal)插件的基本应用

    通常用来显示一个单独的源内容或者是对一些模块进行进一步详细的介绍,可以在不离开父窗体的情况下进行一些互动和内容的交互。

    德顺
  • 宏基因组学习笔记2

    metagenomics, 在希腊语中meta意思是超越的。宏基因组研究的目的是通过对菌种(株)的鉴定,获得真实的多样性数据,功能,协作和进化。宏基因组分析的三...

    用户1075469
  • Django 2.1.7 模型 - MVT模型增删功能

    上一篇Django 2.1.7 模型类 - 字段类型讲述了关于模型字段类的内容,丰富了不少模型中的字段类型。

    Devops海洋的渔夫
  • Laravel 简单实现Ajax滚动加载示例

    开发H5项目的时候我们总是需要用到下拉滚动刷新的方式加载页面。这里用 Laravel 实现一下,直接上代码:

    砸漏

扫码关注云+社区

领取腾讯云代金券