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 条评论
登录 后参与评论

相关文章

来自专栏文武兼修ing——机器学习与IC设计

P2P接口串行FIR设计

配置接口使用寄存器组实现,掉电丢失,因此每次使用之前需要进行配置FIR参数,配置接口时序如下所示:

16440
来自专栏性能与架构

分方式缓存常用的一致性hash是什么原理

一致性hash是用来解决什么问题的? 先看一个场景 有n个cache服务器,一个对象object映射到哪个cache上呢? 可以采用通用方法计算objec...

38790
来自专栏我爱编程

Day21第三方模块Pillow&requests

Pillow PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了。PIL功能非常强大,但API却非常简单易用。...

33550
来自专栏CSDN技术头条

面向机器智能的TensorFlow实践:产品环境中模型的部署

在了解如何利用TesnsorFlow构建和训练各种模型——从基本的机器学习模型到复杂的深度学习网络后,我们就要考虑如何将训练好的模型投入于产品,以使其能够为其他...

50160
来自专栏梦里茶室

TensorFlow深度学习笔记 Tensorboard入门

Github工程地址:https://github.com/ahangchen/GDLnotes 官方教程:https://www.tensorflow.org...

22180
来自专栏AI研习社

Github 项目推荐 | TensorFlow 的模型分析工具 —— TFMA

TFMA 是一个用于评估 TensorFlow 模型的库,它可以让用户使用 Trainer 里定义的指标以分布式方式评估大量数据的模型。这些指标也可以在不同的数...

26120
来自专栏编程

厉害了,用Python一行代码实现人脸识别

摘要: 1行代码实现人脸识别,1. 首先你需要提供一个文件夹,里面是所有你希望系统认识的人的图片。其中每个人一张图片,图片以人的名字命名。2. 接下来,你需要准...

31080
来自专栏Android相关

处理器结构--分支预测(Branch Prediction)

条件分支指令通常具有两路后续执行分支。即不采取(not taken)跳转,顺序执行后面紧挨JMP的指令;以及采取(taken)跳转到另一块程序内存去执行那里的指...

38040
来自专栏PaddlePaddle

【进阶篇】在不同的集群框架下完成分布式训练

编写|PaddlePaddle 排版|wangp 本文将介绍如何使用PaddlePaddle在不同的集群框架下完成分布式训练。分布式训练架构如下图所示: ? A...

44750
来自专栏Deep learning进阶路

caffe随记(八)---使用caffe训练FCN的pascalcontext-fcn32s模型(pascal-context数据集)

本篇讨论利用caffe进行FCN训练(采用的是pascal-context数据集) 1、下载FCN的框架 https://github.com/shelham...

55400

扫码关注云+社区

领取腾讯云代金券