样式消息框

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

   });

});

_布局部分：

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