JavaScript confirm box with redirect
<p>I need to ask a user to confirm the delete of his post. I managed it using the confirm function from jQuery but I wanted to create an overlay box with more customization options and after browsing the web I came up with this:</p>

<p>Info: CMS in question is Wordpress</p>

<p>So first the theme: index.php:</p>

<pre><code>&lt;li class="EditDel"&gt;
    &lt;?php u_delete_post_link('Delete', '', ''); ?&gt;
&lt;/li&gt;
</code></pre>

<p>PHP function:</p>

<pre><code>function u_delete_post_link($link = 'Delete This', $before = '', $after = '') {
    global $post;

    $message = "Are you sure you want to delete ".get_the_title($post-&gt;ID)." ?";
    $delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&amp;amp;post=" . $post-&gt;ID, 'delete-post_' . $post-&gt;ID);
    $htmllink = "&lt;a href='' onclick = \" u_ask_go('".$message."','".$delLink."' ) \"/&gt;".$link."&lt;/a&gt;";
    echo $before . $htmllink . $after;
}
</code></pre>

<p>Now for the actual problem the link above fires a js function with the message and the link:</p>

<pre><code>function u_ask_go(msg,link)
{   
    u_confirm(msg,link, function () {
        window.location.href = arguments[0];
    });
}
</code></pre>

<p>and the u_confirm function:</p>

<pre><code>function u_confirm(message, link, callback) {
    jQuery('#confirm').modal({
        closeHTML: "&lt;a href='#' title='Close' class='modal-close'&gt;x&lt;/a&gt;",
        position: ["20%",],
        overlayId: 'confirm-overlay',
        containerId: 'confirm-container', 
        onShow: function (dialog) {
            var modal = this;

            modal.link = link;

            //console.log(modal.link);

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


            // if the user clicks "yes"
            jQuery('.yes', dialog.data[0]).click(function () {
                // call the callback

                if (jQuery.isFunction(callback)) {
                    //console.log(modal.link);
                    callback.apply(modal.link);
                }
                // close the dialog
                modal.close(); // or $.modal.close();
            });
        }
    });
}
</code></pre>

<p><strong>Problem1:</strong> The callback function does not fire</p>

<p><strong>Problem2:</strong> The dialog collapses and the link executes without user pressing anything</p>

<p><strong>Observation:</strong> Before the modal div is appended the link variable is visible but not in the function on the dialog yes button seems not visible</p>

<p>Hope someone can help</p>

<p>EDIT (HTML buildup):</p>

<pre><code>    &lt;!-- modal content --&gt;
    &lt;div id='confirm'&gt;
        &lt;div class='header'&gt;&lt;span&gt;Confirm&lt;/span&gt;&lt;/div&gt;
        &lt;div class='message'&gt;&lt;/div&gt;
        &lt;div class='buttons'&gt;
            &lt;div class='no simplemodal-close'&gt;No&lt;/div&gt;&lt;div class='yes'&gt;Yes&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- preload images --&gt;
    &lt;div style='display:none'&gt;
        &lt;img src='img/confirm/header.gif' alt='' /&gt;
        &lt;img src='img/confirm/button.gif' alt='' /&gt;
    &lt;/div&gt;
</code></pre>

<p>EDIT2:</p>

<pre><code>echo wp_enqueue_script('simplemodal', $blogroot.'/js/jquery.js');
echo wp_enqueue_script('simplemodal', $blogroot.'/js/jquery.simplemodal.js', array("jquery"));
echo wp_enqueue_script('confirmtest', $blogroot.'/js/confirmtest.js', array("jquery"));
</code></pre>
