Creating custom alert and waiting popup using jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function displayWaitingPopup(){
var dynHtmlPart1 = '
';
//insert lightbox HTML into page
$('body').append(dynHtmlPart1);
$("#shade").css('height', $(document).height());
$("#shade").show();
var dynHtml = '';
//insert lightbox HTML into page
$('body').append(dynHtml);
$("#waitingPopupLoading").show();
}
function hideWaitingPopup(){
$("#shade").hide();
$("#waitingPopupLoading").hide();
}
function displayMessagePopup(message){
//insert lightbox HTML into page
var dynHtmlPart1 = '';
$('body').append(dynHtmlPart1);
$("#messagePopupDisplay").css('height', $(document).height());
$("#messagePopupDisplay").show();
//End
//insert POPUP HTML into page
var dynHtml = '';
$('body').append(dynHtml);
$("#waitingPopup").show();
//End
}
function hideMessagePopup(){
$("#messagePopupDisplay").hide();
$("#waitingPopup").hide();
}
</script>
shade { background-color: #000000; left: 0; opacity: 0.75; position: absolute; top:0; width: 100%; z-index: 9998; }
.shade { color: red;text-align: center; position: fixed; top:150px; width: 100%; z-index: 9999;cursor: auto;}
.messagePopup{ width:295px; text-align:center; margin:0 auto; border:1px solid #CCC; box-shadow:6px 10px 15px #333333; background-color: #FFFFFF;}
messagePopup h2{ background:none repeat scroll 0 0 #22ABDC; padding:5px 0; color:#ffffff; margin-top: 0;}
messagePopup p{ color: #4F4F4F !important; font-family: arial; font-size: 12px; font-weight: bold; padding: 20px 12px;}
messagePopup .okBtn{ background:none repeat scroll 0 0 #22ABDC; border: 1px solid #ccc; color: #ffffff; cursor: pointer; padding: 4px 24px; text-decoration:none; font-size:15px;}
messagePopup .messageDisplay{ color:rgb(45,55,76); }
messagePopupDisplay { background-color: #000000; left: 0; opacity: 0.75; position: absolute; top:0; width: 100%; z-index: 9998; }
Script and Css used to make it work.
/*********************************************POPUP STYLE
#shade { background-color: #000000; left: 0; opacity: 0.75; position: absolute; top:0; width: 100%; z-index: 9998; }
.shade { color: red;text-align: center; position: fixed; top:150px; width: 100%; z-index: 9999;cursor: auto;}
.messagePopup{ width:295px; text-align:center; margin:0 auto; border:1px solid #CCC; box-shadow:6px 10px 15px #333333; background-color: #FFFFFF;}
#messagePopup h2{ background:none repeat scroll 0 0 #22ABDC; padding:5px 0; color:#ffffff; margin-top: 0;}
#messagePopup p{ color: #4F4F4F !important; font-family: arial; font-size: 12px; font-weight: bold; padding: 20px 12px;}
#messagePopup .okBtn{ background:none repeat scroll 0 0 #22ABDC; border: 1px solid #ccc; color: #ffffff; cursor: pointer; padding: 4px 24px; text-decoration:none; font-size:15px;}
#messagePopup .messageDisplay{ color:rgb(45,55,76); }
#messagePopupDisplay { background-color: #000000; left: 0; opacity: 0.75; position: absolute; top:0; width: 100%; z-index: 9998; }
/*********************************************END
/*********************************************SAVASCRIPT CODE
function displayWaitingPopup(){
var dynHtmlPart1 = '';
//insert lightbox HTML into page
$('body').append(dynHtmlPart1);
$("#shade").css('height', $(document).height());
$("#shade").show();
var dynHtml = '';
//insert lightbox HTML into page
$('body').append(dynHtml);
$("#waitingPopupLoading").show();
}
function hideWaitingPopup(){
$("#shade").hide();
$("#waitingPopupLoading").hide();
}
function displayMessagePopup(message){
//insert lightbox HTML into page
var dynHtmlPart1 = '';
$('body').append(dynHtmlPart1);
$("#messagePopupDisplay").css('height', $(document).height());
$("#messagePopupDisplay").show();
//End
//insert POPUP HTML into page
var dynHtml = '';
$('body').append(dynHtml);
$("#waitingPopup").show();
//End
}
function hideMessagePopup(){
$("#messagePopupDisplay").hide();
$("#waitingPopup").hide();
}
/*********************************************END
Click on the below links :-
Waiting popup
Dynamic Message
How to use waiting popup and alert message with Ajax
function nameFunction() {
$.ajax({
type: "POST",
url: URL,
beforeSend: displayWaitingPopup,
complete: hideWaitingPopup,
data: DATA,
success: function(data){
if(data == 'success'){
displayMessagePopup('Write your success message here.');
}else{
displayMessagePopup('Write your error message here.');
}
}
});
}
Download zip for demo.
0 Comment(s)