点击图片或按钮弹窗展示页面

图片或者按钮：

<a href="javascript:void(0);" class="cd-popup-trigger0" >
    <img src="__PUBLIC__/Home/images/select.png" style="float: left;" class="cd-popup-trigger0" > 
 </a>

弹窗内容：

<!--弹框-->
   <div class="cd-popup">
          <div class="cd-popup-container"> 
                 <div class="cd-buttons">
                      <img src="__PUBLIC__/Home/images/classguide.jpg">
                  </div>
             <a href="#0" class="cd-popup-close" style="font-size: 20px">close</a>
           </div>
   </div>

弹窗的样式：

 <style type="text/css">
            
        /*弹框样式1*/
        .cd-popup {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
            -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
            transition: opacity 0.3s 0s, visibility 0s 0.3s;
            z-index:9999;
        }
            .cd-popup.is-visible {
            opacity: 1;
            visibility: visible;
            -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
            -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
            transition: opacity 0.3s 0s, visibility 0s 0s;
        }
        .cd-popup-container {
            position: relative;
            width:980px;
            margin:200px auto;
            height:575px;
            background: #FFF;
            border-radius: .4rem .4rem .4rem .4rem;
            text-align: center;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            -webkit-transform:scale(1.2);
            -moz-transform:scale(1.2);
            -ms-transform:scale(1.2);
            -o-transform:scale(1.2);
            transform:scale(1.2);
            -webkit-backface-visibility: hidden;
            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            transition-property: transform;
            -webkit-transition-duration: 0.3s;
            -moz-transition-duration: 0.3s;
            -ms-transition-duration: 0.3s;
            -o-transition-duration: 0.3s;
            transition-duration: 0.3s;
        }
        .cd-popup-close{
         position: absolute;right:10px;top:10px; z-index: 10;width:auto;height:1.25rem; display: block;font-size:14px;
        }
        .is-visible .cd-popup-container {
            -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);
        } 

        </style>
         

弹窗关窗匹配的JS：

 <script>  
            /*弹框JS内容*/
            jQuery(document).ready(function($){
                //打开窗口
                $('.cd-popup-trigger0').on('click', function(event){
                    event.preventDefault();
                    $('.cd-popup').addClass('is-visible');
                     
                });
                //关闭窗口
                $('.cd-popup').on('click', function(event){
                    if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
                        event.preventDefault();
                        $(this).removeClass('is-visible');
                    }
                });
                //ESC关闭
                $(document).keyup(function(event){
                    if(event.which=='27'){
                        $('.cd-popup').removeClass('is-visible');
                    }
                });

            });
                    
 </script>