然后给弹窗层,和弹窗背景层添加样式。都默认为隐藏状态。 .box-background{ display: none; position: absolute; z-index: 99; left:0px; top:0px; background-color: rgba(0, 0, 0, 0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000); width: 100%; height:100%; } .box{ display: none; height: 160px; width: 320px; border: solid #d6e9c6 2px; text-align: center; line-height: 160px; color: #468847; font-size: 20px; font-weight: 800; background-color: #dff0d8; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } 当我把这两个div的display:none先去掉的时候,出现的情况如下:
我们一般都会让弹窗居中显示才好,所以下面就定一个box()函数来控制弹出、居中、淡入淡出。 var box =function(){ var h = $(window).height(); var w = $(window).width(); var box_left = (w / 2) - parseInt($("#box").css("width")) / 2; var box_top = (h / 2) - parseInt($("#box").css("height")) / 2; $('.box-background').fadeIn("slow").delay(800).fadeOut("100"); $("#box").fadeIn("slow").delay(800).fadeOut("slow"); $("#box").css({position:"absolute","z-index":"1000","left": box_left+"px" ,"top": box_top+"px"}); $(window).scroll(function() { var top = $(window).scrollTop(); var left= $(window).scrollLeft(); $(".box-background").css({ left:left + "px", top: top + "px" }); $("#box").css({ left:(left+box_left) + "px", top: (top+box_top) + "px" }); }); };
再把最开始的a链接修改下: 点击出现弹窗 这样就能实现点击出现弹窗,然后再慢慢消失的情况了。 当然,如果我们的弹窗,需要共用到成功或者失败,则最好是box函数能传一个参数,可以做如下修改: var box =function(flag){ if (flag==1) { $("#box").text("恭喜您预约成功"); }else{ $("#box").text("添加失败").removeClass().addClass("error"); }; var h = $(window).height(); var w = $(window).width(); var box_left = (w / 2) - parseInt($("#box").css("width")) / 2; var box_top = (h / 2) - parseInt($("#box").css("height")) / 2; $('.box-background').fadeIn("slow").delay(800).fadeOut("100"); $("#box").fadeIn("slow").delay(800).fadeOut("slow"); $("#box").css({position:"absolute","z-index":"1000","left": box_left+"px" ,"top": box_top+"px"}); $(window).scroll(function() { var top = $(window).scrollTop(); var left= $(window).scrollLeft(); $(".box-background").css({ left:left + "px", top: top + "px" }); $("#box").css({ left:(left+box_left) + "px", top: (top+box_top) + "px" }); }); }; 当然A链接那块也需要传递一个参数了。
最终页面的完整代码如下:

点击出现弹窗