jQuery Alert Popup
How to implement a simple Alert popup window which you can use instead of the standard JavaScript alert
In this post, we’ll show you how to implement a simple Alert
popup window which you can use instead of the standard JavaScript alert
.
<style type="text/css">
.jqx-alert
{
position: absolute;
overflow: hidden;
z-index: 99999;
margin: 0;
padding: 0;
}
.jqx-alert-header
{
outline: none;
border: 1px solid #999;
overflow: hidden;
padding: 5px;
height: auto;
white-space: nowrap;
overflow: hidden;
background-color:#E8E8E8; background-image:-webkit-gradient(linear,0 0,0 100%,from(#fafafa),
to(#dadada)); background-image:-moz-linear-gradient(top,#fafafa,#dadada);
background-image:-o-linear-gradient(top,#fafafa,#dadada);
}
.jqx-alert-content
{
outline: none;
overflow: auto;
text-align: left;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
border-top: none;
}
</style>
<script type="text/javascript">
jqxAlert = {
// top offset.
top: 0,
// left offset.
left: 0,
// opacity of the overlay element.
overlayOpacity: 0.2,
// background of the overlay element.
overlayColor: '#ddd',
// display alert.
alert: function (message, title) {
if (title == null) title = 'Alert';
jqxAlert._show(title, message);
},
// initializes a new alert and displays it.
_show: function (title, msg) {
jqxAlert._hide();
jqxAlert._handleOverlay('show');
$("BODY").append(
'<div class="jqx-alert" style="width: auto; height: auto;
overflow: hidden; white-space: nowrap;" id="alert_container">' +
'<div id="alert_title"></div>' +
'<div id="alert_content">' +
'<div id="message"></div>' +
'<input style="margin-top: 10px;" type="button"
value="Ok" id="alert_button"/>' +
'</div>' +
'</div>');
$("#alert_title").text(title);
$("#alert_title").addClass('jqx-alert-header');
$("#alert_content").addClass('jqx-alert-content');
$("#message").text(msg);
$("#alert_button").width(70);
$("#alert_button").click(function () {
jqxAlert._hide();
});
jqxAlert._setPosition();
},
// hide alert.
_hide: function () {
$("#alert_container").remove();
jqxAlert._handleOverlay('hide');
},
// initialize the overlay element.
_handleOverlay: function (status) {
switch (status) {
case 'show':
jqxAlert._handleOverlay('hide');
$("BODY").append('<div id="alert_overlay"></div>');
$("#alert_overlay").css({
position: 'absolute',
zIndex: 99998,
top: '0px',
left: '0px',
width: '100%',
height: $(document).height(),
background: jqxAlert.overlayColor,
opacity: jqxAlert.overlayOpacity
});
break;
case 'hide':
$("#alert_overlay").remove();
break;
}
},
// sets the alert's position.
_setPosition: function () {
// center screen with offset.
var top = (($(window).height() / 2) -
($("#alert_container").outerHeight() / 2)) + jqxAlert.top;
var left = (($(window).width() / 2) -
($("#alert_container").outerWidth() / 2)) + jqxAlert.left;
if (top < 0) {
top = 0;
}
if (left < 0) {
left = 0;
}
// set position.
$("#alert_container").css({
top: top + 'px',
left: left + 'px'
});
// update overlay.
$("#alert_overlay").height($(document).height());
}
}
</script>
To show the alert
, just call the alert
function with the alert
message.
jqxAlert.alert('Alert Message');
- The first step is to implement the
Alert
popup styles. We create three CSS classes which we add to thealert
popup, to its header part where the title is displayed and to its content part where the message is displayed. - The next step is to implement the
Alert
popup. We create an object calledjqxAlert
and define four options. The top and left options specify thealert
’s position relative to the browser window’s middle-center position. The ‘overlayOpacity
’ and ‘overlayColor
’ options specify the opacity and background of thealert
’s overlay. We add anoverlay
element because the popup should be modal and until it is visible, the end-user should not be able to click the content outside of the popup.- The ‘
alert
’ function is the one that should be called to display analert
. It has two parameters –message
andtitle
(optional). The ‘alert
’ function specifies thetitle
and themessage
displayed in the alert popup and calls the ‘_show
’ function. When the ‘_show
’ function is called, any oldalert
s are removed. - The ‘
_show
’ function set ups the overlay area by calling the ‘_handleOverlay
’ function and dynamically appends the HTML structure of theAlert
popup to the document’sbody
. In general, the ‘_show
’ function builds thealert
popup, shows it to the user and sets its position by calling the ‘_setPosition
’ utility function. - The ‘
_handleOverlay
’ function adds an additional HTML element to the document’sbody
with size equal to the document’s size, absolute position set to the top-left edge of the page and very high z-index, because that element should be displayed over the other HTML elements on the page. - The ‘
_hide
’ function hides thealert
and removes it completely from the web page. - The ‘
_setPosition
’ function sets thealert
popup’s position to the middle of the screen, but also takes into account the ‘left
’ and ‘top
’ options. By setting the ‘left
’ and ‘top
’ options, you can change the location of the displayed popup.
- The ‘
- Show the
Alert