bootstrap中弹出层（点击按钮，弹出页面）

本文转载自查看原文 2020-01-07 14:11 3473

链接：https://blog.csdn.net/u011798443/article/details/80225904 （侵删）

<!DOCTYPE html>  
<html >  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script src="js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<title>弹出层</title>  
<style>  
.white_content {  
 display: none;  
 position: absolute;   
 left: 25%;  
 width: 50%;  
 padding: 6px 16px;  
 border-top: 30px solid #6cabc5;  
 background-color: white;  
 z-index:1002;  
 overflow: auto; 
 border-radius: 10px;
}  
.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 {  
    margin-top: -28px;
    margin-right: 20px;
}  
.close a {  
 color:#fff;  
 text-decoration:none;  
 font-size:14px;  
 position: fixed; 
}  
</style>  
<script>  
        function show(tag){  
         var light=document.getElementById(tag);  
         light.style.display='block';  
         $("#fade").css('display','block');   
         }  
        function hide(tag){  
         var light=document.getElementById(tag);  
         light.style.display='none';  
         $("#fade").css('display','none');  
        }
</script>  
</head>  
<body>  
<a href="javascript:void(0)" οnclick="show('light')">点击</a>  
<div id="light" class="white_content">  
      <div class="close"><a href="javascript:void(0)" οnclick="hide('light')"> 关闭</a></div> 
                        <div style="overflow:scroll;height:450px;" >            <!-- 滚动条框 -->      
  <table class="table table-responsive-sm table-bordered table-striped" >
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
      </tr>
    </thead>

    <tbody>

      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>

          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
          <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
  </table>
  </div>                        <!-- 滚动条结束 -->
</div>  
<div id="fade" class="black_overlay"></div>  
</body>  
</html>

modal

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 点击按钮弹出弹窗（bootstrap）点击按钮，弹出遮罩层，跳转页面播放视频点击按钮弹出一个div层 jq点击按钮打开和关闭弹出层，点击除了当前按钮以外的地方关闭弹出层 Layer 弹出页面在点击保存关闭弹出层 vue点击其它页面弹出层消失 JS 点击按钮后弹出遮罩层，有关闭按钮 JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮 bootstrap中的模态框（modal，弹出层） bootstrap中的模态框（modal，弹出层）

bootstrap中 弹出层（点击按钮，弹出页面）

免责声明！

bootstrap中弹出层（点击按钮，弹出页面）