Hộp cảnh báo chuẩn trong JavaScript không cung cấp tùy chọn để áp dụng CSS. Để tạo kiểu cho hộp cảnh báo, trước tiên bạn cần tạo một hộp tùy chỉnh. Hộp cảnh báo tùy chỉnh sẽ được tạo bằng jQuery và các kiểu sẽ được áp dụng cho CSS.
Ví dụ
Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách tạo và áp dụng CSS cho hộp cảnh báo -
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function functionAlert(msg, myYes) {
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes").unbind().click(function() {
confirmBox.hide();
});
confirmBox.find(".yes").click(myYes);
confirmBox.show();
}
</script>
<style>
#confirm {
display: none;
background-color: #F3F5F6;
color: #000000;
border: 1px solid #aaa;
position: fixed;
width: 300px;
height: 100px;
left: 40%;
top: 40%;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: #FFFFFF;
display: inline-block;
border-radius: 12px;
border: 4px solid #aaa;
padding: 5px;
text-align: center;
width: 60px;
cursor: pointer;
}
#confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id="confirm">
<div class="message">This is a warning message.</div><br>
<button class="yes">OK</button>
</div>
<input type="button" value="Click Me" onclick="functionAlert();" />
</body>
</html>