<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Alert</title>
<style>
/* The Modal (background) */
.modal
{
display: none;
position: absolute;
left: 35%;
top: 30%;
width: 100%;
height: 100%;
}
/* Modal Content */
.modal-content
{
position: absolute;
border: 1px solid black;
width: 30%;
}
/* The Close Button */
.close { color: white; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
.modal-header { padding: 2px 16px 16px; background-color: gray; color: white; }
.modal-body { padding: 2px 16px; Height:25px; }
.modal-footer { padding: 2px 16px; background-color: gray; color: white; text-align: right; }
</style>
<head>
<body>
<!--Modal-->
<div id="myModal" class="modal">
<!--Content-->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<!--Default Title-->
<a id="title" style="font-size:16px;">System Alert</a>
</div>
<div id="divitemlist" class="modal-body">
<!--Body-->
</div>
<br><br><br>
<div class="modal-footer">
<input type="button" id="Ok" value="Ok" onclick="Ok()" />
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When clicks on <span> (x), close the modal
span.onclick = function() { modal.style.display = "none"; }
function Ok()
{
//Close modal
modal.style.display = "none";
}
function Alert(title, str)
{
//Set modal title
document.getElementById("title").innerHTML = title;
//Set alert message
document.getElementById("divitemlist").innerHTML = str;
modal.style.display = "block";
}
Alert("System Alert", "Please enter alert message.");
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Alert</title>
<style>
/* The Modal (background) */
.modal
{
display: none;
position: absolute;
left: 35%;
top: 30%;
width: 100%;
height: 100%;
}
/* Modal Content */
.modal-content
{
position: absolute;
border: 1px solid black;
width: 30%;
}
/* The Close Button */
.close { color: white; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
.modal-header { padding: 2px 16px 16px; background-color: gray; color: white; }
.modal-body { padding: 2px 16px; Height:25px; }
.modal-footer { padding: 2px 16px; background-color: gray; color: white; text-align: right; }
</style>
<head>
<body>
<!--Modal-->
<div id="myModal" class="modal">
<!--Content-->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<!--Default Title-->
<a id="title" style="font-size:16px;">System Alert</a>
</div>
<div id="divitemlist" class="modal-body">
<!--Body-->
</div>
<br><br><br>
<div class="modal-footer">
<input type="button" id="Ok" value="Ok" onclick="Ok()" />
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When clicks on <span> (x), close the modal
span.onclick = function() { modal.style.display = "none"; }
function Ok()
{
//Close modal
modal.style.display = "none";
}
function Alert(title, str)
{
//Set modal title
document.getElementById("title").innerHTML = title;
//Set alert message
document.getElementById("divitemlist").innerHTML = str;
modal.style.display = "block";
}
Alert("System Alert", "Please enter alert message.");
</script>
</body>
</html>
