bootstrap中的Modal

已于 2022-04-25 22:38:08 修改
阅读量288 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap
于 2020-07-27 13:22:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45701634/article/details/107609843
版权 

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Modial</title>
    <link href="~/Content/picker/sample in bootstrap v2/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Content/picker/sample in bootstrap v2/jquery/jquery-1.8.3.min.js"></script>
    <script src="~/Content/picker/sample in bootstrap v2/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

    <h2>创建模态框（Modal）</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        开始演示模态框
    </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">
                        删除信息
                    </h4>
                </div>
                <div class="modal-body">
                    确定删除信息吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <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>


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Modial</title>
    <link href="~/Content/picker/sample in bootstrap v2/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Content/picker/sample in bootstrap v2/jquery/jquery-1.8.3.min.js"></script>
    <script src="~/Content/picker/sample in bootstrap v2/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <button id="btn" onclick="moda()">删除</button>
    <div id="MessageModel2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="MessageLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="MessageLabel2">头</h4>
                </div>
                <div class="modal-body">
                    <p id="MessageBody2">内容</p>
                </div>
                <div class="modal-footer">
                    <button id="btnModelColse2" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btnModelSure2" type="button" class="btn btn-primary">确认</button>
                    <button id="btnModelNoSure"2 type="button" class="btn btn-warning" data-dismiss="modal">取消</button>

                </div>
            </div>
        </div>
    </div>
</body>

<script>
   

    function moda() {
        $("#MessageLabel2").html("联系信息");
        $("#btnModelSure2").show();
        $("#MessageBody2").html("修改联系信息成功");
        $('#MessageModel2').modal('show');
    }

    $("#btnModelSure2").off('click').on('click', function () {
        //在使用on绑定时候，先用off移除一下事件，要不然会叠加
        $("#MessageModel2").modal('hide');
                @*$.ajax({
                    url: '@Url.Action("Del_SheHuiJianZhi", "NewPersonalInformation")',
                    type: "post",
                    data: { appellationKeys: JSON.stringify(id) },
                    dataType: 'json',
                    success: function (result) {
                        if (result.status === 'success') {
                            $('#dg_SheHuiJianZhi').bootstrapTable('refresh');
                        }
                        else {
                            alert(result.message);
                        }
                    }
                });*@
       })



</script>
</html>
qq_45701634
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
10-16
今天小编就为大家分享一篇关于ckeditor在bootstrap中modal中弹框无法输入的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Bootstrap系列之模态框（Modal）
热门推荐
老__L的博客
06-16 1万+
模态框（Modal）
前端Bootstrap中modal常用用法
m0_62785037的博客
08-03 360
本文主要掌握前端框架bootstrap中modal常见的用法
Bootstrap 模态弹出框（Modals）
soindy
03-24 6547
整理自慕课笔记 插件的源文件：modal.js。 在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。如下图所示： <body> <button class="btn btn-primary" type="button">点击我<
bootstrap源码阅读（一）——modal原理
Daisy花园
12-12 6380
虽然bootstrap主要是css，但是我还是从bootstrap的js入手进行学习 ＃检查jquery，以及jquery版本/*typeof检查是否存在jquery对象*/ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') } /*检查jquery版本
bootstrap的模态框
weixin_69031161的博客
02-07 153
<div class="modal fade" id="addModal"> <!-- 这就是一个bootstrap的模态框 --> </div> <script> let 变量 = new bootstrap.Modal(模态框盒子) 变量.show() // 让模态框显示 变量.hide() // 让模态框隐藏 </script>
解决bootstrap中modal遇到Esc键无法关闭页面
09-03
Bootstrap模态框（Modal）是该框架中一个非常实用的组件，它允许我们在网页上创建弹出式的对话框，用于展示额外的信息或者进行交互操作。然而，在实际开发中，有时会遇到用户按下Esc键时，Bootstrap模态框无法正常...
浅析BootStrap中Modal（模态框）使用心得
10-20
Bootstrap模态框（Modal）是前端开发中常用的一个组件，它允许在当前页面上弹出一个浮动窗口，用于展示额外的信息或进行交互操作，而无需跳转到新的页面。模态框是基于JQuery插件构建的，因此在使用前需要确保引入了...
Bootstrap的modal拖动效果
08-31
Bootstrap模态框（Modal）是前端开发中常用的一个组件，它提供了一种在网页上弹出可交互的对话框的方式。在某些场景下，我们可能需要实现模态框的拖动功能，使得用户可以通过鼠标轻松调整模态框的位置。本文将深入...
python测试开发django-122.bootstrap模态框(modal)学习
qq_27371025的博客
09-13 1085
前言 模态框（Modal）是覆盖在父窗体上的子窗体，使用场景比如：在页面上编辑内容的时候经常需要弹出一个框框，可以编辑字段提交。 点删除按钮的时候，需要弹出二次确认框，这种现页面上的框框就是模态框 模态框(modal) 调用模态框有2种方法： 第一种方法： 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"， 同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="
Bootstrap使用模态框modal遇到的相关问题
AcLings的博客
11-27 744
1、在关闭modal后，modal的幕布没有一同关闭消失，仍然存在，如图： 点开F12，可以看到这个modal幕布并没有随着modal消失 解决方法有两个： a、在关闭modal的时候同时触发一个点击事件，直接把幕布去掉 <button type="submit" class="btn green" onclick="qingchu();">关闭</button> &l...
Bootstrap样式之Modal模态框的使用技巧，超简单【一看就懂】
杨大仙
11-02 5220
最近抽空研究了一下Bootstrap中的Modal模态框，发现了一种非常简单非常好用的使用技巧，特在此分享给大家~ 如下所示： 作用就是在当前页面弹出用户所希望查看的内容，让你制作的网站更加有趣~ 实现其实非常简单（Bootstrap官网链接附在文末） 第一步：去Bootstrap官网api中找到modal（模态框） 找到你喜欢的样式，测试效果，然后单击copy即可复制代码 将复制的代码粘贴到你的首页（或你希望用户在哪处查看的某个页面） 代码各部分构成与详解：1,4为关键点 .
关于BootStrap中Modal（模态框）使用心得
haohaosun1997的博客
05-10 551
一、modal使用： 1.1、登录bootstrap官网，点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js，需要导入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是jquery，所以我们要在导入bootstrap.js前面导入jquery.min.js 对应导入代码： 1.4、从官网找到一个案例使用： 创...
【Bootstrap】模态框（Modal）传值踩坑记录
微雨停了的博客
04-26 3568
文章目录一、模态框介绍二、实现效果三、实现代码—整个table部分+js四、分析4.1 html-button传值4.2 javascript-接值并传值4.3 input-接值五、Reference 一、模态框介绍 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 为了实现父窗体与其的交互，通常需要向其传值，实现带参数的传递，查看数据的唯一性。例如下面窗体：点击任意一个模态框（"回复"按钮）,如果不做任
BootStrap中Modal（模态框）的使用
qq_44963130的博客
12-01 842
BootStrap中Modal（模态框）的使用： 1、静态打开：通过data属性打开隐藏模态框 设置按钮button的data-toggle:“modal”（以模态框的形式打开），data-target:"#myModal"（设置为modal的id） 2、动态打开：以jquery代码为例 $("#myModal").modal({ remote:“test/test.jsp”;//可以填写一个url，会调用jquery load方法加载数据 backdrop:“static”;//指定一个静态背景，当用户点
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
昊虹AI笔记
10-25 2927
Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框
Bootstrap <基础三十二>模态框（Modal）插件
05-18 439
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能，那么您需要引用modal.js。或者，正如Bootstrap 插件概览一章中所提到，您可以引用bootstrap.js或压缩版的bootstrap.min.js。 用法 您可以切换模态框（...
Bootstrap模态框modal使用注意（关闭modal有遮罩框（黑框）、调用.modal(‘show‘)第一次有效，第二次无效解决方法、以及解绑modal框绑定的方法）
最新发布
munangs的博客
10-27 1438
Bootstrap模态框modal使用注意（关闭modal有遮罩框（黑框）、调用.modal('show')第一次有效，第二次无效解决方法、以及解绑modal框绑定的方法）
bootstrap的modal的find
05-20
在 Bootstrap 的 Modal 组件中，可以使用 `find` 方法来查找 Modal 中的某个元素。 例如，如果想要查找 Modal 中的一个按钮元素，可以使用以下代码： ```JavaScript var modal = $("#myModal"); // 获取 Modal ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值