0

外部 URL をモーダルで開こうとしています。この外部ロケーションにより、ユーザーは支払いを入力できます。ユーザーが支払いを完了すると、ユーザーは作業中のサイトに戻るはずです。これを達成するために、現在 iframe をモーダル ウィンドウとしてスタイリングしています。ユーザーが「次へ」ボタンをクリックすると、フォーム アクションによって外部 URL が iframe にポストされます。次に、css はモーダルのような効果を作成して、支払いが入力されるまでユーザーが前の画面のボタンをクリックできないようにします。外部 URL には、入力パラメーターとしてリターン URL とキャンセル URL が必要です。ユーザーが Web サイトを使い終わったら、[送信] または [キャンセル] をクリックすると、外部サイトがユーザーを適切な場所にナビゲートします。私が抱えている問題は、ユーザーが外部サイトでキャンセルまたは送信をクリックしたときです。モーダル ウィンドウは開いたままになり、新しい場所に移動します。私がやりたいことは、モーダル ウィンドウを閉じて、ユーザーがメイン ブラウザで必要な 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 を別のビューに変更します。このビューには、2 つの非表示のボタンと非表示の文字列しかありません (この情報を親に渡したいです。値は 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 は別のビューですが、ページをロードするすべての動作を実行します。ページの読み込みをキャプチャし、type パラメーターが URL に含まれているかどうかを判断します。そうであれば、ビュー上のボタンの 1 つをクリックします。これにより、モーダル ウィンドウを送信またはキャンセルする親関数がトリガーされます。これは少し回りくどいように思えますが、ユーザーがモーダルを閉じるためにクリックしているボタンがホストされたサイトにあるという事実が原因であるに違いありません。また、これを行うと、ホストされたサイトからの応答を取得してデータベースに投入するなど、プロセスでより複雑なことを行うことができます。

<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 に答える