asp 弹窗效果

asp代码：

 1 <link rel="stylesheet" type="text/css" href="PopupWindow/modalBox.css">
 2 
 3 
 4 <% 
 5     '动态加载节日弹窗
 6     dim rsimage,image,displayDate
 7     set rsimage=server.CreateObject("ADODB.recordset")                  
 8     image= ""
 9     ssql1 = "select image,usingdate from OA_IMAGE where usingdate>='" & CurrDate & "'"
10     'Response.Write ssql1
11     rsimage.Open ssql1,Conn_oracleIn,1,1
12     if not rsimage.EOF then
13                    image=rsimage("image")
14                    displayDate=rsimage("usingdate")
15                 %>
16             <div id="myModal" class="modal">
17               <div class="modal-content">        
18                        <Img src='<%=image%>'></Img>            
19                      </div>
20                    </div>
21     <% end if
22     rsimage.Close 
23     %>
24            
25     <script type="text/javascript" src="PopupWindow/modalBox.js"></script>

modalBox.css

 1 .modal {
 2     display: none;
 3     position: absolute;
 4     z-index: 1;
 5     left: 0;
 6     top: 0;
 7      100%;
 8     height: 100%;
 9     overflow: auto;
10     background-color: rgba(0, 0, 0, 0.4);
11 }
12 
13 .modal-content {
14     position: absolute;
15     background-color: #fefefe;
16     margin: 50px;
17     padding: 20px;
18      calc(100VW - 140px);
19     height: calc(100VH - 140px);
20 }
21 
22 .modal-content>img {
23 
24      100%;
25     height: 100%;
26 
27 }

modalBox.js

 1 (function() {
 2     var modalBox = {};
 3     modalBox.modal = document.getElementById("myModal");
 4     modalBox.show = function() {
 5         console.log(this.modal);
 6         this.modal.style.display = "block";
 7     }
 8     modalBox.close = function() {
 9         this.modal.style.display = "none";
10     }
11     modalBox.outsideClick = function() {
12         var modal = this.modal;
13         window.onclick = function(event) {
14             if(event.target == modal) {
15                 modal.style.display = "none";
16             }
17         }
18     }    
19     modalBox.init = function() {
20         var that = this;        
21         that.show();
22         this.outsideClick();
23     }
24     modalBox.init();
25  
26 })();

展示效果：