Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creating custom alert and waiting popup using jquery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 677
    Comment on it

    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>

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: