The following is the code to generate a simple modal alert in JavaScript. This alert in the code will appear on the main page and one cannot access the main page in the background until either the OK or Cancel button is clicked:
<html>
<head>
<script type="text/javascript">
function display_alerts(){
var text1;
if (confirm("Click")) {
text1 = "Ok was pressed";
} else {
text1 = "Cancel was pressed";
}
document.getElementById("disptext").innerHTML = text1;
}
</script>
</head>
<body>
<input type = "text" id = "text1"/>
<input type = "button" onclick="display_alerts()" value="Display
Alert" />
<p id="disptext"/>
</body>
</html>
The following is the code to generate a simple non-modal alert in jQuery. This alert appears for a certain amount of time and then disappears. The method of disappearance can be configured. Here we have configured a fade-away alert:
<html>
<head>
<style>
.message {
position: absolute;
top: 145px;
width: 60%;
left: 20%;
background: #ff9;
border: 1px solid #fc0;
font-size: 150%;
padding: 15px 50px;
}
.message p {
margin: 0;
padding: 0 40px 0 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="message">
<p>This is a non-modal alert</p>
</div>
<script src="C:UsersBhagyashreeDocumentsjquery-
3.3.1.min.js"> </script>
<script>
$(document).ready(function(e) {
// Check if there's a message
if($('.message').length) {
// If mouse is clicked, moved or a key is pressed
$(document).one('click mousemove keypress',
function(e) {
// Fade the message away after 500 ms
$('.message').animate({ opacity: 1.0 },
500).fadeOut();
});
}
});
</script>
</body>
</html>