css遮罩层及遮罩层gif图片居中

遮罩层css代码:

.xy-backdrop{
    display: none;
    position: fixed;
    z-index: 998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.3);
}

图片居中:

.xy-backdrop img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-khtml-transform: translate(-50%,-50%);
}


使用如下:


js代码:

function showFlashDialog(){
	$("div.yx-dialog-flash").css("display","block");
	$("div.xy-backdrop").css("display","block");
}

function hiddenFlashDialog(){
	$("div.yx-dialog-flash").css("display","none");
	$("div.xy-backdrop").css("display","");
}




你可能感兴趣的:(Web前端设计)