如何使用 Web 表单 ASP.Net 在弹出模式中打开 aspx 页面

问题描述 投票：0回答：1

我正在开发一个应用程序，我需要将页面打开到弹出模式中，但不能。下面是我的代码示例。

<%@ 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) {
                    var $form = $(this);
                    debugger
                    /* Create the token and append cipToken as a hidden field on the callback */
    
                    event.preventDefault();
    
                    // Load modal popup
                    $('#modalContainer').css('display', 'block');
    
                    // Fetch content of the page to load into the modal
                    $.get('GravityPaymentsDlg.aspx', function (data) {
                        // Load fetched content into the modal
                        $('#modalContainer').html(data);
                    });
    
                    // Prevent form submission
                    return false;
                });
            });
    
    
        </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>
        <!-- Modal HTML -->
        <!-- Modal Container -->
        <div id="modalContainer" style="display: none;"></div>
    
    
    </body>
    </html>

这是我的代码，它对我不起作用。

asp.net webforms
1个回答
0
投票

我建议将 jQuery.UI 添加到您的项目中。

所以，你需要 jquery 和 jQuery.UI。

所以，说出这个标记：

<style>
    .dialogWithDropShadow {
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    }
</style>

<asp:Button ID="Button1" runat="server"
    Text="Pop other page test"
    OnClick="Button1_Click"
    CssClass="btn" />


<div id="mypopdiv" style="display: none">
    <iframe id="myframe" runat="server" style="width: 100%; height: 95%"></iframe>
</div>

<script>
    function jpop() {

        var mydiv = $("#mypopdiv")
        mydiv.dialog({
            modal: true,
            title: "Hotels", closeText: "",
            dialogClass: "dialogWithDropShadow",
            width: 1000, height: 800,
            buttons: {
                Ok: function () {
                    mydiv.dialog('close')
                }
            }
        });
    }
</script>

背后的代码是这样的：

    protected void Button1_Click(object sender, EventArgs e)
    {
        myframe.Src = "~/Grids/Fighters.aspx";

        string sJava = "jpop()";

        ScriptManager.RegisterStartupScript(Page, Page.GetType(),"myjs", sJava, true);
    }

结果是这样的：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.