Modal外部Url重定向不正确

Modal External Url improperly redirecting

本文关键字：不正确 重定向 Url 外部 Modal      更新时间：2023-09-26

我正在尝试模式打开外部url。这个外部位置允许用户输入付款。用户成功支付后，用户应直接回到我正在工作的网站。为了实现这一点，我目前将iframe样式化为模态窗口。当用户单击"下一步"按钮时，表单动作将外部url发送到我的iframe。然后，css创建一个类似模态的效果，以防止用户在输入付款之前单击前一个屏幕上的按钮。外部url需要一个返回url和一个取消url作为输入参数。当用户使用完网站后，他们将点击提交或取消，外部网站将把用户导航到适当的位置。我遇到的问题是，当用户在外部网站上单击取消或提交时，模态窗口保持打开并导航到新位置。我想要发生的是为模态窗口关闭，并为用户导航到主浏览器中必要的url。有没有人有一个想法，如何实现这一点或编码的方法，这将避免这个问题?谢谢!

代码:

<style>
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: -60;
    right: 0;
    bottom: 0;
    left: 0;
    background: #EAC5C5;
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 850px;
    height: 700px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    background: #fff;
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
</style>
<script type="text/javascript">
    function openModal() {
        window.location.assign("#openModal")
    }
    function cancelUrl() {
        window.location.assign("#close")
    }
</script>
<body>
    <form action="https://hostedpage" target="my-iframe" method="post" id="testForm" runat="server">
    <label for "Hidden4">Amount: </label>
    <input type="text" name="Amount" id="Hidden4" value="" />
    <input type="hidden" name="RURL" id="Hidden7" value="https://testurl.com" />
    <input type="hidden" name="CURL" id="Hidden8" value="http://testurl2.aspx#close" />
    <asp:Button ID="Submit" runat="server" Text="Next" UseSubmitBehavior="true" OnClientClick="openModal()" />
    </form>
    <div id="openModal" class="modalDialog" >
        <div id="div1">
                <a href="#close" title="Close" class="close">X</a>
                <iframe id="iframe" name="my-iframe" style="width: 850px; height: 700px;" frameborder="0" ></iframe>
        </div>
    </div>
</body>

所以代码比我第一次问这个问题时更复杂了，但总体思路还是一样的。因此，我将url更改为"testurl.com&type=submit"，CURL更改为"testurl.com .aspx&type=cancel"。我使用的是c# .net，在Page_Load函数中，我检测类型参数是否存在。如果是，我将iframe更改为不同的视图。这个视图只有两个隐藏的按钮和一个隐藏的字符串(我想把这个信息传递给父视图)。该值是在Page_Load函数中设置的)。

<asp:View ID="newView" runat="server" >
    <form id="frm" runat="server" style="display:none">
        <asp:TextBox ID="Label25" runat="server" CssClass="NoDisplay" />
        <input type="button" id="hiddenButton" onclick="parent.submit(this.form.Label25.value);" style="display:none" />
        <input type="button" id="hiddenCancel" onclick="parent.cancel();" style="display:none" />
    </form>
</asp:View>

即使iframe是一个不同的视图，它仍然经历了加载页面的所有动作。我捕获页面加载并确定类型参数是否在url中。如果是，则单击视图上的一个按钮。这将触发提交或取消模态窗口的父函数。我知道这似乎有点迂回，但它必须是因为这个事实，按钮的用户点击关闭模态是在托管网站。此外，这样做允许我在过程中做更复杂的事情，例如从托管站点捕获响应并将其扔到我们的数据库中。

<script type="text/javascript">
function testFunction() {
            var urlParms = new Array();
            urlParms = document.URL;.split("?");
            if (typeof thisNVP[1] !== "undefined") {
                var parmArray = urlParms[1].split("&"); 
                var thisfrag = new Array();
                for (i = 0; i < parmArray.length; i++) {
                    thisfrag = parmArray[i].split("=");
                    if (thisfrag[0] == "type") {
                        if(thisfrag[1] == "cancel") {
                            document.getElementById("hiddenCancel").click();
                        } else {
                            document.getElementById("hiddenButton").click();
                        }
                    }
                }
            }
        }
</script>
<body onload="testFunction()">
</body>
相关文章：