SimpleModal: how to pass mailtolink after Submit in the modal window

Question

I'm using simple modal to display a legal alert before the user can send email to a specific address:

On my main page:

<a href="mailto:somebody@abc.com" class="legalnotice">somebody@abc.com</a>

jQuery being used:

jQuery(function ($) {
    $('.legalnotice').click(function(e) {
        var src = "email_alert.html";
        $.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
            closeHTML:"",
            closeCLASS:"simplemodal-close",
            containerCss:{
            backgroundColor:"#f8f8f8",
            borderColor:"#f8f8f8",
            height:500,
            padding:0,
            width:400
        },
        overlayClose: true
        });

        return false;
    });
});

email_alert.html contains:

<form name="alertFORM" id="alertFORM" action="">
  <div class="row-box"><input type="checkbox" /><label>I understand and agrees</label></div>
  <input name="Submit" type="submit" class="modal-close simplemodal-close" id="Submit" value="Close" />
</form>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#alertFORM').submit(function() {
    window.parent.jQuery.modal.close(true);
});
</script>

When the user clicks the email address, the window opens as expected. They check "I understand" to accept the notice, hit "Submit", and the window closes - as expected. However, I can't figure how to get the opening page to go ahead and continue from where it left off so their email client now opens so they can write an email to the selected address.

Little help please??

Answer 1

You could trigger the mailto window to open by using:

window.location.href = "mailto:email@example.com";

Therefore you could just add that after the modal is closed:

$('#alertFORM').submit(function() {
    $.modal.close();
    window.location.href = $('.legalnotice').attr('href');
});

If you want a dynamic approach that passes the href mailto value when the dialog is opened, use:

$('.legalnotice').on('click', function (e) {
    e.preventDefault();
    var mailto = $(this).attr('href');

    $.modal($('#alertFORM'), {
        closeHTML: "",
        closeCLASS: "simplemodal-close",
        containerId: "modal",
        containerCss: {
            backgroundColor: "#f8f8f8",
            borderColor: "#f8f8f8",
            height: 500,
            padding: 0,
            width: 400
        },
        overlayClose: true,
        onClose: function (dialog) {
            $.modal.close();
            window.location.href = mailto;
        }
    });
});

Within the onClose callback, trigger the mailto window to open with window.location.href = mailto when the dialog is closed:

onClose: function (dialog) {
    $.modal.close();
    window.location.href = mailto;
}

.. and for your iframe :

$('.legalnotice').on('click', function (e) {
    e.preventDefault();
    var src = "email_alert.html";
    var mailto = $(this).attr('href');

    $.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
        closeHTML: "",
        closeCLASS: "simplemodal-close",
        containerId: "modal",
        containerCss: {
            backgroundColor: "#f8f8f8",
            borderColor: "#f8f8f8",
            height: 500,
            padding: 0,
            width: 400
        },
        overlayClose: true,
        onClose: function (dialog) {
            $.modal.close();
            window.location.href = mailto;
        }
    });
  });
});

Answer 2

Slight variation to get the iframe with the external file back in there, and it works a treat.

$('.legalnotice').on('click', function (e) {
    e.preventDefault();
    var src = "email_alert.html";
    var mailto = $(this).attr('href');

    $.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
        closeHTML: "",
        closeCLASS: "simplemodal-close",
        containerId: "modal",
        containerCss: {
            backgroundColor: "#f8f8f8",
            borderColor: "#f8f8f8",
            height: 500,
            padding: 0,
            width: 400
        },
        overlayClose: true,
        onClose: function (dialog) {
            $.modal.close();
            window.location.href = mailto;
        }
    });
 });
});

Thanks for the assistance!!