Styling message box

Question

Im пытается дать некоторый стиль для окна сообщения, которое появляется после нажатия кнопки выхода из системы (только окно подтверждения). Мой 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(); 
     }); 
     }); 
});