点击文字弹出一个DIV层窗口代码

最新推荐文章于 2022-12-01 17:25:18 发布

尼古拉蹦蹦

最新推荐文章于 2022-12-01 17:25:18 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/u012415332/article/details/74456114

版权

//点击div，会出现弹出层代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 
    <head> 
        <title>点击文字弹出一个DIV层窗口代码</title> 
        <style> 
        .black_overlay{ 
            display: none; 
            position: absolute; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%; 
            
            z-index:1001; 
           background-color: rgba(229,235,238,0.8);
        } 
        .white_content { 
            display: none; 
            position: absolute; 
 
            top: 25%; 
            left: 35%; 
            width: 632px; 
            height: 494px; 
            padding: 20px; 
            border: 1px solid #adacac; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
    .sj_con {
        padding: 0px;
        height: 460px;
        width: 600px;
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 15px;
        border: 1px solid #adacac;
    }
   .selt {
        height: 40px;
        width: 335px;
        margin-top: 0;
        float:left;
        padding: 0px;
        margin-right: 0px;
        margin-bottom: 10;
        margin-left: 135px;
    }
  .seltt {
        height: 50px;
        width: 354px;
        margin-top:45px;
        float:left;
        padding: 0px;
        margin-right: 0px;
        margin-bottom: 10;
        margin-left: 135px;
    }
  .lfbt {
        font-size: 17px;
        line-height: 40px;
        color: #FFF;
        background-color: #009ddc;
        text-align: center;
        float: left;
        height: 40px;
        width: 123px;
   }
  .lfbt a {
        color: #FFF;
        text-decoration: none;
    }
  .qb2 {height: 25px;
        width: 220px;
        border: 1px solid #ededed;color: #323131;
    }
  .selt span {
        font-size: 17px;
        line-height: 25px;
        text-align:left;
        margin-left: 0px;
        padding: 0px;
        float: left;
        height: 25px;
        width: 60px;
        color: #323131;
    }
  select {
        height: 25px;
        width: 220px;
        border: 1px solid #ededed;color: #323131;
    }
 .qb1 {
        padding: 0px;
        float: left;
        height: 25px;
        width: 220px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left:10px;
        border: 1px solid #323131;
    }


</style> 
    </head> 

    <body> 
        <p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p> 
        <div id="light" class="white_content"> 
        <div class="sj_con">
   
            <div class="selt" style="margin-top:70px;">
            <span>数据集:</span>
            <div class="qb1"> 
               <input type="text"placeholder="上传本地数据" class="qb2"/>
            </div>
 
        </div>

<div class="selt">
  <span>领域:</span>
  <div class="qb1"> 
  <select>
 <option value="wl">物流</option>
 <option value="ds">电商</option>
 <option value="yx">医学</option>
 <option value="nt">媒体</option>
</select>
  </div>
</div>

 <div class="selt">
  <span>时间:</span>
  <div class="qb1"> 
   <input type="text" class="qb2"/>
  </div>
 
</div>
 
  <div class="selt">
  <span>来源:</span>
  <div class="qb1"> 
  <select>
 <option value="zf">政府</option>
 <option value="gj">国家</option>
 <option value="yx">地球</option>
 <option value="nt">火星</option>
</select>
  </div>
</div>

<div class="selt">
  <span>时间:</span>
  <div class="qb1"> 
   <input type="text" class="qb2"/>
  </div>
 
</div>

<div class="seltt">
  <div class="lfbt"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">提交</a></div>
  <div class="lfbt" style="float:right;"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</a></div>
</div>


 
 </div>
</div> 
        <div id="fade" class="black_overlay"></div> 
    </body> 
</html>

尼古拉蹦蹦

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
点击文字弹出一个DIV层窗口代码

点击div，会出现弹出层代码点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%;
复制链接

扫一扫