jquery 实现简洁实用的弹窗代码。
css 代码:
.oppoBg{width: 100%;height:100%;position:absolute;background-color: #000;top:0;left:0;opacity: 0.6;z-index:10;margin:0;} .oppoBox{position:absolute;background-color: #fff;z-index: 11;margin:0;}
js 代码:
$('body').click(function (e) { //点击非#oppoBox区域关闭弹窗和背景 if (!$(e.target).closest('#oppoBox').length) { $('#oppoBg,#oppoBox').addClass('hide'); } }); $('.nameTool').click(function (event) { var oppoBox = $('#oppoBox'); $('#oppoBg').css({'height': $(document).height() + 'px'}); oppoBox.css({'width': $(document).outerWidth() * 2 / 5 + 'px'});//这里要与下面的分开写 oppoBox.css({'left': ($(document).width() - oppoBox.outerWidth()) / 2 + 'px', 'top': ($(document).height() - oppoBox.outerHeight()) / 2 + 'px'}); $('#oppoBg,#oppoBox').removeClass('hide'); event.stopPropagation();//阻止事件冒泡 });
html 代码:
<div id="oppoBg" class="hide oppoBg"></div> <div id="oppoBox" class="hide oppoBox"> <div> <div>这是一个测试弹窗的示例!</div> </div> </div>