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>

• 10 段实用的 .htaccess 代码片段
• JS实现密码加密
• JQuery 选择器用法大总结
• css实现字体特效
• git设置使用代理
• JS实现5分钟页面无操作触发弹窗事件
• JQuery下拉菜单效果（超简洁实用，兼容IE和firefox等主流浏览器）
• 经典实用DOS命令收集