jQuery UI Widgets › Forums › General Discussions › jQuery Alert Popup
Tagged: alert, custom, icon, jqxNotification, Notification, pop-up
This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.
-
AuthorjQuery Alert Popup Posts
-
Hi there,
Is it possible to insert an image(.png) within the alert box, right before the word ‘Alert Message’ as an icon ? Please give a solution.
Thanks in advance.Hello vishakh.v.p.,
Are you referring to jqxNotification? If so, you can add a custom notification icon as shown in the following demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnotification/javascript-notification-custom-icon.htm?arctic.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks.But issue is : I would like to see the icon before the message “Alert Message”.Am attaching the code along with this.Please give a solution.<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” src=”../../scripts/jquery-1.7.2.min.js”></script>
<title>jQuery Alert</title>
<style type=”text/css”>
/* applied to the alert */
.jqx-alert
{
position: absolute;
overflow: hidden;
z-index: 99999;
margin: 0;
padding: 0;
}
/*applied to the header */
.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);
}
/*applied to the content*/
.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>
<script type=”text/javascript”>
$(document).ready(function () {
jqxAlert.alert(‘Alert Message’);
})
</script>
</head>
<body>
</body>
</html>Hi vishakh.v.p.,
We do not have a widget called jqxAlert. We have jqxNotification for displaying alerts. Please take a look at our widget’s features here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnotification/index.htm.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Check this link,I tried the alert popup from your site only.Please give a solution.
http://www.jqwidgets.com/jquery-alert-popup/Hi vishakh.v.p.,
If you wish, we can help you achieve your requirement with jqxNotification. The example in the blog post is provided as is and any modifications to it are up to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.