Creating a Custom Alert Function
In this approach, HTML, CSS, and JavaScript are used to create an alert box with a custom title and message. The HTML creates a custom alert with a title, message, and a close button. CSS styles make it look good and position it in the middle. JavaScript functions control when to show or hide the alert. When you click Show Alert, it pops up clicking OK hides it.
Example: The example below shows how to Edit a JavaScript Alert Box Title using the Custom Alert Function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Custom Alert Box</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="text-center mt-5">
<h2 class="text-success">
w3wiki
</h2>
<p>
How to edit a JavaScript
alert box title?
</p>
<button onclick="showAlert()"
class="btn btn-success">
Show Alert
</button>
</div>
<div id="customAlert" class="p-5 bg-light mx-auto
w-50 mt-5 text-center
d-none">
<div>
<div>
<h4>w3wiki</h4>
</div>
<div>
Welcome to w3wiki! Explore our
vast collection of articles, tutorials,
and coding challenges to enhance your
programming skills.
</div>
<button onclick="closeAlert()"
class="mt-2 btn btn-success">
OK
</button>
</div>
</div>
<script>
function showAlert() {
document.getElementById('customAlert')
.classList.remove('d-none');
}
function closeAlert() {
document.getElementById('customAlert')
.classList.add('d-none');
}
</script>
</body>
</html>
Output:
How to edit a JavaScript Alert Box Title in Bootstrap ?
JavaScript alert boxes are an essential component, frequently used to deliver important messages or notifications to users. There are two methods to edit the title of a JavaScript alert box.
First, you can create a custom modal dialog, offering complete control over appearance and functionality. Alternatively, you can use a library like SweetAlert, providing more customization options than the default alert function.
Table of Content
- Creating a Custom Alert Function
- Using SweetAlert Library