bootstrap 模态窗口点击图层不关闭写法

最新推荐文章于 2019-08-13 10:46:13 发布
最新推荐文章于 2019-08-13 10:46:13 发布
阅读量1.4k 收藏 1
点赞数 1
<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
    String path = request.getContextPath();
            String basePath = request.getScheme() + "://"
                    + request.getServerName() + ":" + request.getServerPort()
                    + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<!--适应手机显示-->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

</style>
<script type="text/javascript" src="lib/bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="lib/bootstrap/utilLib/bootstrap.min.css" type="text/css" media="screen" />

<script>
  $(document).ready(function () {
      $("#apply").click(function () {
            $.ajax({url:'填写你的请求地址',
                type : 'post',
                data : $("#form1").serialize(),//取得所有表单内容
                dataType : 'json',
                success : function(data) {
                 
                    if (data.code == 100) {
                        $("#title").html("成功");
                    }
                    else {
                        $("#title").html("失败");
                    }
                    $("#msg").html(data.msg);
                    $("#submit").click();//触发模态窗口
                }
            });
        });
    });
</script>
</head>
<body style="padding: 10% 5% 5% 5%">
    <center>
        <s:form id="form1" action="apply_secretkey" method="post"   namespace="/payment/appstore">
            <table width="100%" border="0">
                <tr>
                    <td>

                        <div>

<!--大字体-->

                            <input type="text" name="tel"  placeholder="Number" class=" input-lg form-control"/><br>
                        </div>
                        <br>
                    </td>
                </tr>
                <tr>
                    <td width="100%">

                        <div>

<!--大字体-->

                            <button type="button" id="apply"   class="btn  btn-block  btn-lg btn-info">点击</button>   
                        </div>
                    </td>
                </tr>
            </table>

        </s:form>
    </center>

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

    <div style="display: none">

<!--指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。-->

        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="submit" data-backdrop="static"></button>
    </div>
    <!-- 模态框（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>
                    <em id="title"> </em>
                </div>
                <div class="modal-body">
                    <em id="msg"></em>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
</body>
</html>
再见理想123
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 模态框自定义点击和关闭事件详解
10-18
今天小编就为大家分享一篇Bootstrap 模态框自定义点击和关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
bootstrap用户点击模态框model外部时不会关闭模态框。
qq_42318977的博客
02-01 952
给模态框添加data-backdrop="static"
bootstrap的modal弹窗，在多层窗口关闭时只会关闭自窗口，不再关闭父窗口
weixin_30823227的博客
01-29 858
bootstrap多层modal弹窗时。当子窗口关闭时，所有父窗口一起关闭。 原因是bootstrap在窗口关闭事件委托时，委托给所有窗口。 如源码： this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) 改进为： this.$elem...
bootstrap 点击模态框上的提交按钮后，模态框不能关闭的解决办法
weixin_30847865的博客
10-26 1596
项目问题如下图， 点击确定后，模态框没反应，按理，点击删除按钮时，弹出确认删除的模态框，点击确定后，使用ajax请求服务器，把数据库中对应的数据进行删除，根据服务器 servlet返回的状态值（delTag的值），来确定是否删除成功，delTag为true,删除成功，此时应执行语句 $('#deleteMessModal').modal('hide'); 把模态框关掉，但是调试时怎么页关闭不...
bootstrap弹出框(模态框)在表单提交后自动关闭
null
12-07 9745
在提交成功后的回调函数添加： $(&quot;#mymodal&quot;).modal('hide');
bootstrap图层弹起（模态框）
huoyuanshen的博客
12-17 357
1、最好总在独立的问题，如body前端，防止样式干扰，并标记明显分割线。 2、页面中有两个以上模态框时，注意关键字名称，无重复。 3、$("#btn_cancel_rejectCheck").on('click',function(){，这种方法只会在获取的第一个dom添加动作，避免dom重名。 &lt;div class="container-fluid text-center"&gt;...
Bootstrap模态窗口源码解析
08-31
主要为大家详细解析了Bootstrap模态窗口源码，基本每行都加了注释，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
BootStrap 模态框实现刷新网页并关闭功能
08-31
主要介绍了BootStrap 模态框实现刷新网页并关闭的功能，实现方法简单易懂,需要的朋友可以参考下
Bootstrap模态框禁用空白处点击关闭
11-28
bootstrap的模态框在默认情况下，点击其他空白区域（通常是遮罩层），模态框会被关闭，那么以下方法就是禁止点击其他区域关闭模态框。 $(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); backdrop:...
bootstrap模态窗口美化特效
12-10
这是一款bootstrap模态窗口美化特效。该特效在原生bootstrap模态窗口的基础上，通过添加自定义的CSS样式，制作出效果非常炫酷的模态窗口。
ps-bootstrap:使用您自己的一组图层，图层组和参考线来启动.psd
05-07
tested on Photoshop CS3, CS4 and CS5 Photoshop引导程序 创建自己的预定义的图层，图层组和参考线集，这样您就不必在每次需要新的psd时都手动进行设置。 安装 将build/bootstrap.jsx复制到您的photoshop脚本文件夹中： Windows： C:\Program Files\Adobe\Adobe Photoshop CS5\Presets\Scripts Mac OS： Applications\Adobe Photoshop CS5\Presets\Scripts 如果已将.jsx文件复制到正确的目录，则重新启动该脚本后，该脚本应显示在Photoshop中的file › scripts › bootstrap下。 创建可能会很好。 例子 用法 编辑bootstrap.jsx顶部的设置对象，以满足您自己的需求。 默认设置
Bootstrap弹出窗内容的换行
Donng
06-06 3534
bootstrap弹出窗可以方便的展示模块的详细信息，但是按照官网给定的写法发现内容不会换行，添加<br> 标签内容还是原样输出到弹出窗中。 悬浮框效果图：同时需要js中初始化 ： $('[data-toggle="popover"]').popover() data-content的内容通常使用模板传值来动态显示，当在php 代码换行处手动插入换行 <br>,弹出窗会以纯文本形式展示。 以此代码也
bootstrap模态框点击空白处模态框不消失、监听模态框打开还是关闭
lml_little的博客
08-05 1万+
1.在div上添加 aria-hidden="true"   属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。 data-show="false"   data-show当初始化时显示模态框。 2.添加js $('#myModal').modal({backdrop: 'static
Bootstrap实现遮罩层
热门推荐
简单就是美
07-01 6万+
1、点击打开遮罩层按钮 2、弹出一个隐藏的div 实现代码如下： 影音先锋 --> 遮罩层DEMO 打开遮罩层
bootstrap模态框点击遮罩层时，让模态框不关闭
贵林之恋的博客
05-17 6400
模态框默认情况，当点击遮罩层或者按下esc键时会关闭模态框，项目需求当点击的时候不关闭，自己用了两种办法解决。第一种：直接添加属性 data-backdrop="static" data-keyboard="false"&lt;div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelled
bootstrap 模态框model点击模态框外部不消失模态框的效果
baidu_30907803的博客
05-22 5641
由于客户使用是，填写模态框内容时，不小心点击了外部，有需要重新填写，因此需要限制点击外部不消失模态框，只能通过点击模态框的确定按钮或者右上角叉号，消失模态框。 只要在定义模态框时，添加上 data-backdrop="static" 属性即可。 如： div class="modal fade modal-aside horizontal right addOrUpdatePrivile
Bootstrap 模态框避免点击背景处关闭
Vision
06-08 3万+
问题： Bootstap 模态框在用户点击背景空白处时，会自动关闭。解决方法： 在HTML页面中编写模态框时，在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”，即可。 在需要显示模态框，初始化时，$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 其中 ，backdrop
使用bootStrap模态框遇到的一个小问题；点击确定之后模态框不关闭，背景也没移除，无法操作界面
咸鱼的博客
08-13 3125
$("#divAddAddress").modal('hide'); $(".modal-backdrop").remove(); 我用了上面两条语句解决，第一个是用来隐藏模态框，第二个用来消除模态框背景（其中分别使用了id选择器，和class选择器） ...
bootstrap模态窗口
最新发布
11-24
Bootstrap模态窗口是一种常见的Web界面设计元素，用于在当前页面上弹出一个对话框，以便用户进行某些操作或查看信息。以下是一个简单的Bootstrap模态窗口的例子： ```html <!-- 模态窗口触发按钮 --> 打开模态...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值