ASP.NET Web Forms中如何在弹出模态框打开ASPX页面

• 模态框缺少基础样式：modalContainer仅设置了display:none，没有遮罩层、定位、背景等核心样式，即使显示也只是普通div，不具备模态框的视觉和交互特性。
• 内容加载与显示顺序错误：先显示空容器再加载内容，会导致短暂的空白显示，且加载完成后未同步处理样式渲染。
• 完整HTML页面的结构冲突：如果GravityPaymentsDlg.aspx返回包含<html>、<head>、<body>的完整HTML文档，插入当前页面会破坏原有DOM结构，导致样式和脚本失效。
• 未利用jQuery Mobile原生组件：既然引入了jQuery Mobile，手动实现模态框不如直接使用其原生popup组件稳定。

方案1：使用jQuery Mobile原生Popup组件（推荐） #

直接利用框架自带的popup功能，避免手动处理样式和DOM问题：

<%@ page title="GravityPayments" language="vb" autoeventwireup="false" codebehind="GravityPayments.aspx.vb" inherits="AspenWebConnector.CustomerPortal.GravityPayments" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Charge it Pro Payment</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Author" content="Charter Software, Inc." />
    <meta http-equiv="Copyright" content="2017 Charter Software, Inc." />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
    <meta name="Distribution" content="global" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="../JQuery/jquery.mobile-1.4.1/jquery.mobile-1.4.1.min.css" />
    <script src="../JQuery/jquery-1.10.2.min.js"></script>
    <script src="../JQuery/jquery.mobile-1.4.1/jquery.mobile-1.4.1.min.js"></script>
    <script src="https://ppppublic.blob.core.windows.net/webpos/CIP.token.js"></script>

    <script>
        jQuery(function ($) {
            $('#payment-form').submit(function (event) {
                event.preventDefault();
                
                $.get('GravityPaymentsDlg.aspx', function (data) {
                    // 提取目标页面的主体内容，避免完整HTML结构冲突
                    var content = $(data).find('body').html();
                    $('#popupContent').html(content);
                    // 初始化并打开popup
                    $('#paymentPopup').popup('open');
                    // 若弹窗内有jQuery Mobile控件，需初始化样式
                    $('#popupContent').enhanceWithin();
                });
            });
        });
    </script>
</head>
<body>
    <div class="ui-corner-all custom-corners">
        <div class="ui-body ui-body-a">
            <form action="GravityPayments.aspx" method="post" id="payment-form">
                <div id="payment-errors"></div>
                <div class="ui-field-contain">
                    <label>Billing First Name</label>
                    <input type="text" data-cip="billingfirstname" id="BillFirstName" value="<%=BillingFirstName%>" />
                </div>
                <div class="ui-field-contain">
                    <button type="submit">Submit</button>
                </div>
                <div class="ui-field-contain">
                    <button type="button" onclick="location.href = 'MainMenu.aspx';">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <!-- jQuery Mobile Popup容器 -->
    <div data-role="popup" id="paymentPopup" data-dismissible="false" style="max-width:800px;">
        <div id="popupContent" class="ui-content"></div>
    </div>
</body>
</html>

方案2：手动修复模态框样式与加载逻辑 #

若不想依赖jQuery Mobile组件，可补全样式并调整加载逻辑：

1. 添加模态框基础样式 #

在<head>中插入：

<style>
    #modalContainer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.7);
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
    }
    #modalContent {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        max-width: 80%;
        max-height: 80%;
        overflow-y: auto;
    }
</style>

2. 修改容器与JS逻辑 #

<!-- 替换原modalContainer -->
<div id="modalContainer">
    <div id="modalContent"></div>
</div>

<script>
    jQuery(function ($) {
        $('#payment-form').submit(function (event) {
            event.preventDefault();
            
            $.get('GravityPaymentsDlg.aspx', function (data) {
                // 提取目标页面主体内容
                var content = $(data).find('body').html();
                $('#modalContent').html(content);
                // 加载完成后显示模态框
                $('#modalContainer').css('display', 'flex');
            });

            // 点击遮罩关闭模态框
            $('#modalContainer').click(function(e) {
                if(e.target === this) {
                    $(this).css('display', 'none');
                }
            });
        });
    });
</script>

• 避免加载完整HTML：确保GravityPaymentsDlg.aspx仅返回页面主体内容（移除<html>、<head>、<body>标签），或通过JS提取body内的内容，防止破坏当前页面DOM结构。
• 调试技巧：打开浏览器开发者工具（F12），查看Network标签确认GravityPaymentsDlg.aspx是否加载成功，Console标签是否有报错，快速定位问题。

内容的提问来源于stack exchange，提问作者Kamran Khan