asp 弹窗效果

asp代码：

<link rel="stylesheet" type="text/css" href="PopupWindow/modalBox.css">


<% 
    '动态加载节日弹窗
    dim rsimage,image,displayDate
    set rsimage=server.CreateObject("ADODB.recordset")                  
    image= ""
    ssql1 = "select image,usingdate from OA_IMAGE where usingdate>='" & CurrDate & "'"
    'Response.Write ssql1
    rsimage.Open ssql1,Conn_oracleIn,1,1
    if not rsimage.EOF then
                   image=rsimage("image")
                   displayDate=rsimage("usingdate")
                %>
            <div id="myModal" class="modal">
              <div class="modal-content">        
                       <Img src='<%=image%>'></Img>            
                     </div>
                   </div>
    <% end if
    rsimage.Close 
    %>
           
    <script type="text/javascript" src="PopupWindow/modalBox.js"></script>

modalBox.css

.modal {
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
     100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    position: absolute;
    background-color: #fefefe;
    margin: 50px;
    padding: 20px;
     calc(100VW - 140px);
    height: calc(100VH - 140px);
}

.modal-content>img {

     100%;
    height: 100%;

}

modalBox.js

(function() {
    var modalBox = {};
    modalBox.modal = document.getElementById("myModal");
    modalBox.show = function() {
        console.log(this.modal);
        this.modal.style.display = "block";
    }
    modalBox.close = function() {
        this.modal.style.display = "none";
    }
    modalBox.outsideClick = function() {
        var modal = this.modal;
        window.onclick = function(event) {
            if(event.target == modal) {
                modal.style.display = "none";
            }
        }
    }    
    modalBox.init = function() {
        var that = this;        
        that.show();
        this.outsideClick();
    }
    modalBox.init();
 
})();

展示效果：