how do i have dynamic confirmation popup using simple modal

Question

I am using simple model which is a very neat piece of code but i have one requirement i can't figure out.

http://www.ericmmartin.com/simplemodal/

my use case is the third options where i want a "Confirmation Popup" after a user clicks on an action. The issue is that in the example the message is hardcoded in the js file.

i need to be able to pass in this message as well as the link that is associated with the "Yes" and "no" buttons.

has anyone done anything similar.

Answer 1

I would recommend BlockUI which is what I use. With this plugin, it uses an existing <div> value to display the message. In the event that triggers the dialog to fire you can use jQuery to modify the message and link text via normal DOM manipulation before it shows the <div> as your application requires.

jQuery BlockUI Plugin - Dialog Example

EDIT - per the first comment below.

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#test').click(function() { 
        $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
    }); 

    $('#yes').click(function() { 
        // Remove the UI block.
        $.unblockUI(); 
        //  Or you could use window.open
        window.location = "http://www.google.com";
    }); 

    $('#no').click(function() { 
        $.unblockUI(); 
        return false; 
    }); 
});

Answer 2

Looking at the source of the page tells you everything you need to know.

<!-- Confirm -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
<script src='js/confirm.js' type='text/javascript'></script>

and

<div id='confirmDialog'><h2>Confirm Override</h2>

    <p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p>
    <form action='download/' method='post'>
     <input type='button' name='confirm' value='Demo' class='confirm demo'/><input type='button' name='download' value='Download' class='demo'/>
     <input type='hidden' name='demo' value='confirm'/>
    </form>
</div>
<div id='confirm' style='display:none'>

    <a href='#' title='Close' class='modalCloseX simplemodal-close'>x</a>
    <div class='header'><span>Confirm</span></div>
    <p class='message'></p>
    <div class='buttons'>
     <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
    </div>
</div>

Above we can clearly see that the messaging is all in the HTML, and not in the javascript at all.

And if we then look at the JS source of confirm.js it's all laid out there for you in terms of how to initialize/trigger it.

/*
 * SimpleModal Confirm Modal Dialog
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2009 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: confirm.js 185 2009-02-09 21:51:12Z emartin24 $
 *
 */

$(document).ready(function () {
    $('#confirmDialog input.confirm, #confirmDialog a.confirm').click(function (e) {
     e.preventDefault();

     // example of calling the confirm function
     // you must use a callback function to perform the "yes" action
     confirm("Continue to the SimpleModal Project page?", function () {
      window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
     });
    });
});

function confirm(message, callback) {
    $('#confirm').modal({
     close:false,
     position: ["20%",],
     overlayId:'confirmModalOverlay',
     containerId:'confirmModalContainer', 
     onShow: function (dialog) {
      dialog.data.find('.message').append(message);

      // if the user clicks "yes"
      dialog.data.find('.yes').click(function () {
       // call the callback
       if ($.isFunction(callback)) {
        callback.apply();
       }
       // close the dialog
       $.modal.close();
      });
     }
    });
}

Answer 3

The code given in the confirm.js contains two method definitions. One is a generic method called confirm, which will create your modal popup with the message you want to be displayed. You have to use this method whenever you want to create the modal popup.

confirm("Are you sure you want to delete this item?", function() {
    //Here you will write the code that will handle the click of the OK button.
});

Here, the second argument is a function (this works almost like a delegate in C#). What will happen is that the confirm function will show a dialog containing your message, and when the user clicks any button, the anonymous function passed as the second argument will be invoked. You can also write a "normal" function and pass it as a second argument to confirm -

function callbackHandler() {
    //Here you will write the code that will handle the click of the OK button.
}

confirm("Are you sure you want to delete this item?", callbackHandler);

Your function will be invoked by this piece of code -

// if the user clicks "yes"
dialog.data.find('.yes').click(function () {
    // call the callback
    if ($.isFunction(callback)) { callback.apply(); }
    // close the dialog
    $.modal.close();
});