js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div

预期效果：

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",
            width: "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>

 

posted on 2013-10-09 14:21  freeliver54  阅读(2680)  评论(0)  编辑  收藏  举报

导航