Question

我需要让用户确认删除他的帖子。我使用jQuery的confirm函数管理它，但我想创建一个包含更多自定义选项的覆盖框，在浏览网页后我想出了这个：

信息：有问题的CMS是Wordpress

首先是主题：index.php：

<li class="EditDel">
    <?php u_delete_post_link('Delete', '', ''); ?>
</li>

PHP函数：

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

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

现在针对实际问题，上面的链接使用消息和链接激发js函数：

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

和u_confirm函数：

function u_confirm(message, link, callback) {
    jQuery('#confirm').modal({
        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        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();
            });
        }
    });
}

问题1：回调函数无法触发

问题2：对话框崩溃，链接无需用户按任何内容即可执行

观察：在附加模态div之前，链接变量是可见的，但是在对话框中的函数中没有看到按钮似乎不可见

希望有人可以提供帮助

编辑（HTML建立）：

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

EDIT2：

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"));

Answer 1

最好的办法是不要将你的函数放在onClick =“”属性中，你应该使用jQuery来调用这样的函数，并将变量存储在自定义数据属性中（info here）< / p>

jQuery的：

$('a#confirmDelete').live('click', function(e) {

    // Prevent default
    e.preventDefault();

    var msg = $(this).attr('data-message');
    var link = $(this).attr('data-del-link');

    u_confirm(msg,link, function () {
        window.location.href = arguments[0];
    });
});

HTML：

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

    $message = "Are you sure you want to delete ".get_the_title($post->ID)." ?";
    $delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&amp;post=" . $post->ID, 'delete-post_' . $post->ID);
    $htmllink = "<a href="#" id="confirmDelete" data-message="' . $message . '" data-del-link="' . $delLink . '" />".$link."</a>";
    echo $before . $htmllink . $after;
}

Answer 2

好的让它工作再次感谢Coulton指出我正确的方向。但仅仅是为了完成答案的意思：

我必须在functions.php文件中以正确的方式包含脚本而不是标题（注意：第一个参数需要针对每个脚本而不同，这就是为什么它没有加载正确的第一名）：

echo wp_enqueue_script（'jquery'，$ 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”））;
在我的情况下，以下两行不起作用：

var msg = $（this）.attr（'data-message'）;

var link = $（this）.attr（'data-del-link'）;

不得不用这个替换它们：

var msg = jQuery(this).attr('data-message');
var link = jQuery(this).attr('data-del-link');

带有重定向的JavaScript确认框

2 个答案: