(js特效) js代码实现弹出层

阿里阅读：706 2021-03-31 22:10:51 评论：0

源代码：

<html> 
<head> 
<title>LIGHTBOX EXAMPLE</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <style type="text/css"> 
          .black_overlay{ 
             display: none;  
             position: absolute;   
             top: 0%;   
             left: 0%;   
             width: 100%;   
             height: 100%;   
             background-color: black;   
             z-index:1001;   
             -moz-opacity: 0.8;   
             opacity:.80;   
             filter: alpha(opacity=80);   
        }  
        .white_content { 
            display: none;   
            position: absolute;  
            top: 25%;  
            left: 25%;  
            width: 50%;  
            height: 50%;  
            padding: 16px; 
            border: 2px solid orange;  
            background-color: white;  
            z-index:1002; 
            overflow: auto; 
        }   
    </style> 
    <script language="javascript"> 
        function openWindow(){ 
            document.getElementById('light').style.display='block'; 
            document.getElementById('fade').style.display='block'; 
        } 
        function closeWindow(){ 
            document.getElementById('light').style.display='none'; 
            document.getElementById('fade').style.display='none'; 
        } 
    </script> 
 
</head> 
<body> 
     
    <p>可以根据自己要求修改css样式 
    <input type="button" value="点击这里打开窗口" οnclick="openWindow()"/></p> 
    </body> 
    <div id="light" class="white_content"> 
     This is the lightbox content. 
     <a href="#" onClick="closeWindow()"> Close</a></div> 
    <div id="fade" class="black_overlay"></div> 
     
</html>

效果展示：

标签:java 编程语言

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。