造型消息框

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(); 
     }); 
     }); 
});