预期效果:
1、点击Save按钮,创建及显示loading div框
2、Save操作完成后,再删除loading 及弹出提示结果
<html> <head> </head> <body> <input type="button" value="Save" name="btnSave" /> </body> </html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function loadingShow(){ var loadingContainer = $("div.loading"); if (loadingContainer.length <= 0) { loadingContainer = $("<div>", { Class: "loadingWhenSave" , id:"loadingWhenSave" }); var img = $("<img>", { src: "loading.gif" }); loadingContainer.html(""); loadingContainer.append(img).css({ position: "absolute", //"absolute", zIndex: "9999", textAlign: "center", backgroundColor: "#000", border: "solid 4px red", paddingTop: "18px", fontSize: "14px", top: "30%", left: "40%", height: "300px", "400px" }); //document.body.appendChild(loadingContainer); loadingContainer.appendTo('body'); } //$(loadingContainer).show(); } function loadingHide(){ $("#loadingWhenSave").remove(); } function saveFinished(){ //loadingHide(); alert("save success."); } $(document).ready(function(){ $(btnSave).click(function(){ loadingShow(); setTimeout("saveFinished()",2000); }); }); </script>