Modal External Url improperly redirecting

Question

I am trying to modally open an external url. This external location enables the user to input a payment. After the user has sucessfully paid, the user should be directed back to the site that I am working on. In order to accomplish this, I am currently styling an iframe as a modal window. When the user clicks the 'next' button, a form action posts the external url to my iframe. Then, the css creates a modal-like effect in order to prevent the user from clicking buttons on the previous screen until the payment is input. The external url requires a return url and a cancel url as input parameters. When the user is done with the website, they will click either submit or cancel and the external site will navigate the user to the appropriate location. The problem that I am having is when the user clicks cancel or submit on the external site, the modal window remains open and navigates to the new location. What I want to happen is for the modal window to close and for the user to be navigated to the necessary url in the main browser. Does anyone have an idea for how to accomplish this or a method of coding this that would avoid this problem? Thanks!

Code:

<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>

maybe you could use a `Bootstrap` with `Bootboxjs`, check the following examples http://bootboxjs.com/ — Cristian, May 27 '14 at 21:54
you need to redirect the user back to a page you control, where you can use a script to call top.postMessage() to send a message to your framing page. a one-line message event handler waits for the message and calls modal.close() (or whatever) to hide the un-needed modal from the user. — dandavis, May 27 '14 at 23:50
I don't think using postMessage is going to work for me because the users will be the public and I cannot assume that they will all be using current web browsers. — Jenn, May 29 '14 at 15:15

score 0 · Accepted Answer · answered Jun 03 '14 at 20:00

So the code is more complicated than when I first asked this question, but the overall idea remains. So, I changed the RURL to be "testurl.com&type=submit" and the CURL to be "testurl2.aspx&type=cancel". I am using c# .net and in the Page_Load function, I am detecting if the type parameter exists. If it does, I change the iframe to a different view. This view has only two hidden buttons and a hidden string (I want to pass this info to the parent. The value is set in the Page_Load function).

<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>

Even though the iframe is a different view, it still goes through all the motions of loading the page. I capture the page load and determine if the type parameter is in the url. If it is, I click one of the buttons on the view. This triggers the parent functions that either submit or cancel the modal window. I know this seems a little roundabout, but it has to be because of the fact that the buttons the user is clicking to close the modal are on the hosted site. Also, doing this allows me to do more complicated things in the process, such as capture the response from the hosted site and throw it into our database.

<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>

Modal External Url improperly redirecting

1 Answers1