Question

I'm trying to use SimpleModal as a confirmation for an email disclaimer i.e. clicking on the email address pops up the modal, users who agree to the disclaimer can send email using the mailto: method, users who decline do not get the popup.

  • I have a couple dozen email addresses on a single page so I need to pass the address to the script
  • The disclaimer is used on other pages as well, so I would like to include the html copy as well, it's about 4 paragraphs.

This is what I have so far, it almost works except no mail client popup on confirmation:

<a href="mailto:user@domain.com" class="confirm">user@domain.com</a>

<div id='confirm'>
    <div class='header'><span>Confirm</span></div>
    <div class='message'></div>
    <div class='buttons'>
        <div class='no simplemodal-close'>Cancel</div>
        <div class='yes'>Confirm</div>
    </div>
</div>

and the javascript:

jQuery(function ($) {
    $('a.confirm').click(function (e) {
        e.preventDefault();

        msg = 'this is the copy of the confirmation dialog I want to pop up, it goes on and on and on';

        // example of calling the confirm function
        // you must use a callback function to perform the "yes" action
        confirm(msg, function () {
            window.location.href = hrefval;
        });
    });
});

function confirm(message, callback) {
    $('#confirm').modal({
        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        position: ["20%",],
        minWidth: '660px',
        minHeight: '400px',
        overlayId: 'confirm-overlay',
        containerId: 'confirm-container', 
        onShow: function (dialog) {
            var modal = this;

            $('.message', dialog.data[0]).append(message);

            // if the user clicks "yes"
            $('.yes', dialog.data[0]).click(function () {
                // call the callback
                if ($.isFunction(callback)) {
                    callback.apply();
                }
                // close the dialog
                modal.close(); // or $.modal.close();
            });
        }
    });
}
Was it helpful?

Solution

Figured it out, I just had to explicitly grab the href value.

jQuery(function ($) {
    $('a.confirm').click(function (e) {
        e.preventDefault();

        href = $(this).attr('href');

        msg = 'this is the copy of the confirmation dialog I want to pop up, it goes on and on and on';

        // example of calling the confirm function
        // you must use a callback function to perform the "yes" action
        confirm(msg, function () {

            window.location.href = href;
        });
    });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top