Question

我在使用简单模式显示合法警报之前，用户可以将电子邮件发送到特定地址：

在我的主页上：

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

使用jQuery：

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包含：

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

当用户点击电子邮件地址时，窗口将按预期打开。他们检查＆＃34;我理解＆＃34;接受通知，点击＆＃34;提交＆＃34;，窗口关闭 - 正如预期的那样。但是，我无法确定如何让开始页面继续前进并从中断处继续，以便他们的电子邮件客户端现在打开，以便他们可以向所选地址写一封电子邮件。

请帮忙吗？

Answer 1

您可以使用以下命令触发mailto窗口打开：

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

因此，您可以在模态关闭后添加：

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

如果您想要在打开对话框时传递href mailto值的动态方法，请使用：

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

在onClose回调中，当对话框关闭时，触发mailto窗口以window.location.href = mailto打开：

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

..以及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

稍微改变一下，将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;
        }
    });
 });
});

感谢您的帮助!!

SimpleModal：如何在模态窗口中提交后传递mailtolink

2 个答案: