重定向的JavaScript確認框

Question

我需要讓用戶確認刪除他的帖子。我設法它利用jQuery的確認功能，但我想創造更多的自定義選項，瀏覽網頁後的疊加框，我想出了這一點：

信息：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&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：回調函數不火

Problem2：對話框崩潰和鏈接的執行沒有用戶按任何東西

觀察：模態的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的調用功能像這樣，和存儲在自定義數據屬性的變量（資訊here）

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

好得到它重新工作得益於庫爾頓點我在正確的方向。 但僅僅完成了答案的含義：

1. 我必須包括腳本在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」））;

2. 在我的情況下2行沒有工作：

   變種味精= $（本）.attr（ '數據消息'）;

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

經本替換它們：

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