0

我正在尝试以模态方式打开一个外部 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>
4

1 回答 1

0

所以代码比我第一次问这个问题时更复杂，但总体思路仍然存在。因此，我将 RURL 更改为“testurl.com&type=submit”，将 CURL 更改为“testurl2.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>
于 2014-06-03T20:00:32.063 回答