জাভাস্ক্রিপ্টে স্ট্যান্ডার্ড অ্যালার্ট বক্স CSS প্রয়োগ করার বিকল্প প্রদান করে না। আপনার সতর্কতা বাক্স স্টাইল করতে, আপনাকে প্রথমে একটি কাস্টম তৈরি করতে হবে। jQuery ব্যবহার করে কাস্টম অ্যালার্ট বক্স তৈরি করা হবে এবং স্টাইলগুলি CSS-এ প্রয়োগ করা হবে।
উদাহরণ
অলার্ট বক্সে কীভাবে CSS তৈরি এবং প্রয়োগ করতে হয় তা শিখতে আপনি নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন -
<!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> 