jquery弹出层代码

html+CSS部分：

<div class="box"></div><!--演示主体盒子-->
	<div class="layer"><!--弹出层盒子-->
		<div class="icon"><!--弹出层点击框-->
			<span>活动规则</span>
		</div>
		<div id="ruleBox"><!--弹出层弹出框-->
			<div class="close"></div>
			<div class="ruleMsg">
				<div class="ruleTop">
					<p>活动规则</p>
					<b class="closeBtn">X</b>
					<hr/>
				</div>
				<div class="ruleContent">
					<p style="text-align:center">活动规则：</p>
					<p>《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，在《周刊少年Jump》1997年34号开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。2012年5月11日，《航海王》获得第41回日本漫画家协会赏。截至2015年6月15日，《航海王》以日本本土累计发行了3亿2086万6000本，被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日”   。</p>
	                                <p style="text-align:center">本公司对此活动享最终解释权</p>
				</div>
			</div>
		</div>
	</div>

  html,body{height:100%;}
  .box{position: relative;width:100%;height:100%;background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525235939231&di=bc32cd8dd5633648dfbf906b826a8e17&imgtype=0&src=http%3A%2F%2Fupload.shunwang.com%2F2016%2F0617%2F1466129569852.jpg) no-repeat;background-size:100% 100% ;}
  .layer>.icon>span{position:fixed;display: inline-block;width:100px;height:200px;background-color: #f40;height: 154px;width: 40px;border-radius: 5px;top: 40%;right: 0;font-size: 32px;padding:10px ;color:#fff}
   #ruleBox {
            width: 100%;height: 100%;text-align: center;position: fixed;top: 0;z-index: 99;background-color: rgba(0,0,0,0.6); display: none;
        }
   .close{position:absolute;width: 100%;height: 50%;top: 0;}
    #ruleBox .ruleMsg {
          width: 100%;height: 50%;position: fixed;bottom: 0;border-radius: 10px 10px 0 0;background-color: #fff;
        }
        .ruleTop {
            padding: 3.5% 5.33% 0;
            text-align: center;
            position: relative;
        }
        .ruleTop p {
            font-size: 1rem;
            color: rgb(51,51,51);
            margin-bottom: 2.66%;
            font-weight: bold;
        }
        .ruleContent p {
            width: 95%;
            margin-bottom: 4%;
        }
        .ruleContent {
            height: 85%;
            padding: 4% 1% 0 5.33%;
            text-align: left;
            overflow: auto;
            font-size: .1rem;
            color: rgb(102,102,102);
        }
        .ruleTop .closeBtn {
            position: absolute;
            font-size: 1rem;
            top: 50%;
            right: 7%;
            font-family: Arial;
        }
        p{font-family:微软雅黑, 苹方, 思源黑体;color:#666666;font-size:14px;background-color:#FFFFFF;}

js部分：

     //活动规则
        $(function(){
            $('.icon>span').click(function(){
                $('#ruleBox').css('display','block');
                $('html,body').css('overflow','hidden');
            });
            $('.closeBtn').click(function(){
                $('#ruleBox').css('display','none');
                $('html,body').css('overflow','auto');
            });
            $('.close').click(function(){
                $('#ruleBox').css('display','none');
                $('html,body').css('overflow','auto');
            });
        });

还有更简单的方式就是使用layer插件实现。

地址：http://layer.layui.com/点击打开链接