造型消息框

Question

我試圖給出一些風格的消息框，彈出後按下注銷按鈕（只是確認窗口）。爲此我的jQuery代碼：

$(document).ready(function() { 
$("a[data-post]").click(function (e) { 
    e.preventDefault(); 

    var $this = $(this); 
    var message = $this.data("post"); 

    if (message && !confirm(message)) { 
     return; 
    } 

    $("<form>") 
     .attr("method", "post") 
     .attr("action", $this.attr("href")) 
     .appendTo(document.body) 
     .submit(); 

    }); 

}); 

_layout部分：

<a href="@Url.RouteUrl("Logout")" data-post="Are you sure you want to Logout?"><div class="navFont">Logout</div></a> 

問題林不知道如何調用該消息框在CSS文件給它一些風格。

Answer 1

您不能將樣式應用於confirm或alert框，因爲它們將與各自的瀏覽器不同，因此它們不能是overridden。你會發現很多jquery plugin來完成這項任務。其中之一是我的個人最好成績爲這些類型的要求是有很多的選擇，併爲您的要求Sweet-Alert插件，它可以實現如下：

步驟

---

• Download the files
• 包含必要Sweet-Alert參考文件。

例

<link rel="stylesheet" type="text/css" href="sweetalert.css"> 
<script src="sweetalert.min.js"></script> 

• 修改您click事件包括Sweet-Alert

例

$("a[data-post]").click(function (e) { 
    e.preventDefault(); 
    var $this = $(this); 
    var message = $this.data("post"); 
    swal({ 
     title: "Are you sure?", 
     text: message, //Your message here 
     type: "warning", 
     showCancelButton: true, 
     confirmButtonColor: "#DD6B55", 
     confirmButtonText: "Yes", 
     closeOnConfirm: false 
    }, function(){ 
     //this gets executed if user hits `Yes` 
     $("<form>") 
     .attr("method", "post") 
     .attr("action", $this.attr("href")) 
     .appendTo(document.body) 
     .submit(); 
     }); 
     }); 
});