造型消息框

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 part：

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