SimpleModal as an alert: Couple of Issues

[LesMizzell]

Basically using SimpleModal to display a legal disclaimer when the user clicks a “mailto” link.
I’m calling the modal thusly:

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

My jQuery look like:

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: false
    });

    // return false;
});
});

The modal window opens just fine. No problem there.
And then inside the file I’m calling…

<form>
  <div class="row-box"><input type="checkbox" /><label>I understand and agree</label></div>
  <input type="submit" class="simplemodal-close" value="Submit" />
</form>

First, clicking on the “Submit” button isn’t closing the dialog. I’ve tried a number of different ways, a link, divs … all with the “simplemodal-close” class, and it’s simply NOT closing. Even if I specify "closeCLASS:“simplemodal-close”

Second, even if I get the dialog to close, I’ve not figured how to get the mailto address to pass on.

[Paul_Wilkins]

You can use the following from within the iframe to close it:

window.parent.jQuery.modal.close(true);

For example:

$('form').on('submit', function () {
    window.parent.jQuery.modal.close(true);
});

[LesMizzell]

@Paul_Wilkins

window.parent.jQuery.modal.close(true);

Tried the below previously - doesn’t work either:

<form name="alertFORM" id="alertFORM">
  <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>
$('#alertFORM').submit(function() {
    window.parent.jQuery.modal.close(true);
});
</script>

[LesMizzell]

Ahhh … jQuery has to be loaded into the iFrame! So, the below will close the modal window, BUT, it’s not going ahead and allowing the email address from the “mailto” link to continue on after the close:

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

[Paul_Wilkins]

Now that you’ve got this far, can you link us to an online version of your page? There may be other issues with it that are best explored in a live environment.

[LesMizzell]

Crap - private environment so far:

So what I can figure - I need to pass a variable (the email address being clicked) to the modal window and then when the window closes, tell it to open the mailto link.

Chasing that now…

[LesMizzell]

Got it! Solution is:

$('.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;
        }
    });
 });
});