$(function(){ //展示层 function showLayer(id){ var layer = $('#'+id), layerwrap = layer.find('.hw-layer-wrap'); layer.fadeIn(); //屏幕居中 layerwrap.css({ 'margin-top': -layerwrap.outerHeight()/2 }); } //隐藏层 function hideLayer(){ $('.hw-overlay').fadeOut(); } $('.hwLayer-ok,.hwLayer-cancel,.hwLayer-close').on('click', function() { hideLayer(); }); //触发弹出层 $('.show-layer').on('click', function() { var layerid = $(this).data('show-layer'); showLayer(layerid); }); //点击或者触控弹出层外的半透明遮罩层，关闭弹出层 $('.hw-overlay').on('click', function(event) { if (event.target == this){ hideLayer(); } }); //按ESC键关闭弹出层 $(document).keyup(function(event) { if (event.keyCode == 27) { hideLayer(); } }); });
其实到这里，一个基本的弹出层效果已经做好了。我们这里只是做一个基本的弹出层，你也可以进行继续扩展代码。我们看过很多弹出层插件，很多都是动态直接操作DOM的，也就是通过js代码先createElement，然后在将内容append到body里的，这种方式如果是频繁操作DOM的话会消耗一定的性能，所以从性能角度考虑的话，我推荐使用本文提供的弹出层方式。
好了，接下来我们将弹出层的代码封装成一个简单的jQuery插件，以插件的形式来调用，满足各种不同弹出层效果的需求，敬请关注。
您可能感兴趣的文章: