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

来源:互联网 发布:折八百淘宝商城下载 编辑:程序博客网 时间:2024/05/23 22:49
<%@ 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-lgbtn-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>
1 0
原创粉丝点击