jquery实现一个居中弹出层窗口效果代码-html代码-BFW代码库

jquery实现一个居中弹出层窗口效果代码

代码语言：html

所属分类：弹出层

代码描述：jquery实现一个居中弹出层窗口效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
        @charset "utf-8";
    /* CSS Document */
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    /*按钮样式*/
    #ClickMe {
    	width: 200px;
    	height: 30px;
    	border: 1px solid #C40000;
    	background-color: #000;
    	color: #FFF;
    	margin:0 auto;
    }
    #goodcover {
    	display: none;
    	position: absolute;
    	top: 0%;
    	left: 0%;
    	width: 100%;
    	height: 133%;
    	background-color: black;
    	z-index: 1001;
    	-moz-opacity: 0.8;
    	opacity: 0.50;
    	filter: alpha(opacity=80);
    }
    #code {
    	width: 300px;
    	height: 300px;
    	background-color: #fff;
    	padding: 10px;
    	position: absolute;
    	display: none;
    	left: 45%;
    	z-index: 1002;
    }
    .close1 {
    	width: 300px;
    	height: 60px;
    }
    #closebt {
    	float: right;
    }
    #closebt img {
    	width: 20px;
    }
    .goodtxt {
    	text-align: center;
    }
    .goodtxt p {
    	height: 30px;
    	line-height: 30px;
    	font-size: 16px;
    	color: #000;
    	font-weight: 600;
    }
    .code-img {
       	text-align: center;
    	
    
    }
    .code-img img {
    	width: 140px;
    	
    }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>


</head>

<body>
    <br><br><br><br><br><br><br>
    <center>
        <div>
            <button type="button" id="ClickMe">点击显示弹窗遮罩</button>
        </div>
    </center>
    <div id="goodcover"></div>

    <div id="code">
        <div class="close1">
            <a href="javascript:void(0)" id="closebt"><img src="//repo.bfw.wiki/bfwrepo/icon/5d834b3fc7ffe.png"></a>
        </div>
        <div class="goodtxt">
            <p>微信扫一扫</p>

        </div>
        <div class="code-img"> <img id="ewmsrc" src="//repo.bfw.wiki/bfwrepo/image/5f9e27c437f2a.png"></div>
    </div>

    <script>
        $(function() {
            //alert($(window).height());
            $('#ClickMe').click(function() {
                $('#code').center();
                .........完整代码请登录后点击上方下载按钮下载查看