简单的兼容各种浏览器的遮蔽效果 - javascript学习,js知识点 - CSS模版园-免费网站模版下载
当前位置 CSS模版园 >> 网站制作 >> javascript >> 简单的兼容各种浏览器的遮蔽效果

原创简单的兼容各种浏览器的遮蔽效果

简单的兼容各种浏览器的遮蔽效果,有自定义提示语句和遮蔽层,使用简单,代码少

在使用ajax加载数据时调用,提醒用户,数据正在加载中;

上传图片的时候,提醒用户,图片正在上传中等待;

核心代码如下:

var cssteach = {
    //遮蔽层
    loading: {
	show: function (text) {
	    text = text || "正在操作,请稍候...";
	    var loadinghtml = '<div id="zhezhao_ttcon" style="position:fixed;z-index:9999;text-align:center;width:100%;top:160px;">'
				+ '<span style="display: block;width: 200px; margin: 0 auto; padding: 20px; border: 3px solid #efefef;color:#efefef;background: #000;opacity:.8;filter:alpha(opacity=80);">' + text + '</span>';
				+'</div>'

	    var zz = $("#zhezhao_tt");
	    if (zz.length == 0) {
		z = $("<div id='zhezhao_tt' style='width:100%;background:#000;position:absolute;top:0px;left:0px;z-index:9998;opacity:.3;filter:alpha(opacity=30);'></div>");

		$("body").append(zz);
		$("body").append(loadinghtml);
	    }
	    $("#zhezhao_tt").height($(document).height());
	},
	hide: function () {
	    $("#zhezhao_tt").remove();
	    $("#zhezhao_ttcon").remove();
	}
    }
}

查看实例

<input id="Button1" type="button" value="显示遮蔽层,3s后关闭" />
<input id="Button2" type="button" value="显示遮蔽层,不会关闭" />

<script type="text/javascript" src="http://cssteach.com/statics/js/jquery.min.js"></script>
<script>
    $("#Button1").click(function () {
        cssteach.loading.show("加载数据中,请稍候。。。");
        setTimeout(function () { cssteach.loading.hide(); }, 3000);
    });
    $("#Button2").click(function () {
        cssteach.loading.show("加载数据中,请稍候。。。");
    });
</script>
<script>
    var cssteach = {
        //遮蔽层
        loading: {
            show: function (text) {
                text = text || "正在操作,请稍候...";
                var loadinghtml = "<div id=\"zhezhao_ttcon\" style=\"position:fixed;z-index:9999;text-align:center;width:100%;top:160px;\">"
                                + "<span style=\"display: block;width: 200px; margin: 0 auto; padding: 20px; border: 3px solid #efefef;color:#efefef;background: #000;opacity:.8;filter:alpha(opacity=80);\">" + text + "</span>";
                                +"</div>"

                var zz = $("#zhezhao_tt");
                if (zz.length == 0) {
                    zz = $("<div id=\"zhezhao_tt\" style=\"width:100%;background:#000;position:absolute;top:0px;left:0px;z-index:9998;opacity:.3;filter:alpha(opacity=30);\"></div>");

                    $("body").append(zz);
                    $("body").append(loadinghtml);
                }
                $("#zhezhao_tt").height($(document).height());
            },
            hide: function () {
                $("#zhezhao_tt").remove();
                $("#zhezhao_ttcon").remove();
            }
        }
    }
</script>

原创文章内容原创,转载请注明出处:cssteach.com

声明本站所有资源仅供学习与参考,请勿用于商业用途。转载请注明来自:cssteach.com

原文http://cssteach.com/html/show-10-158.html

若文章内容有错误或无法下载,请在回复中说明(可无需登录,直接评论)

最新文章

图文

热门网站模版