js实现页面弹出层

"William'_

于 2019-04-15 13:33:49 发布

阅读量6.8k

点赞数 1

分类专栏： JavaScript 文章标签： js 弹出层

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

示例代码如下：

<html>
 <head>
  <meta charset="UTF-8">
  <title>js弹出层实例</title>
  <style>
   * {
    margin:0;
    padding:0
   }
   html, body {
    height: 100%;
    width: 100%;
    font-size:12px
   }
   .white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    padding: 6px 16px;
    border: 12px solid #D6E9F1;
    background-color: white;
    z-index:1002;
    overflow: auto;
   }
   .black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
   }
   .close {
    float:right;
    clear:both;
    width:100%;
    text-align:right;
    margin:0 0 6px 0
   }
   .close a {
    color:#333;
    text-decoration:none;
    font-size:14px;
    font-weight:700
   }
   .con {
    text-indent:1.5pc;
    line-height:21px
   }
  </style>
  <script>
   function show(tag){
    var light=document.getElementById(tag);
    var fade=document.getElementById('fade');
    light.style.display='block';
    fade.style.display='block';
    var a = document.getElementsByClassName().innerHTML = sd;
    console.log();
    
   }
   function hide(tag){
    var light=document.getElementById(tag);
    var fade=document.getElementById('fade');
    light.style.display='none';
    fade.style.display='none';
   }
   
  </script>
 </head>
 <body>
  <a href="javascript:void(0)" "show('light')">打开1</a>
  <a href="javascript:void(0)" "show('light2')">打开2</a>
  <div id="light" class="white_content">
   <div class="close"><a href="javascript:void(0)" "hide('light')"> 关闭</a></div>
   <div class="con"> 
     <h1>这是一个弹出层</h1>
     内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 
   </div>
  </div>
  
  <div id="light2" class="white_content">
   <div class="close"><a href="javascript:void(0)" "hide('light2')"> 关闭</a></div>
   <div class="con"> 
    内容2 
   </div>
  </div>
  
  <div id="fade" class="black_overlay"></div>
  
 </body>
</html>

Source:https://zhidao.baidu.com/question/108864645.html

"William'_

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js实现页面弹出层

示例代码如下：<html> <head> <meta charset="UTF-8"> <title>js弹出层实例</title> <style> * { margin:0; padding:0 } html, body { height: 100%; wid...
复制链接

扫一扫

专栏目录