自定义一个模态框

最新推荐文章于 2023-08-02 14:16:29 发布

大表哥6

最新推荐文章于 2023-08-02 14:16:29 发布

阅读量1.1k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/big_borther6/article/details/80405220

版权

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    .btn{  
        width: 100px;  
        height: 35px;  
     
    } 
	/* 外层阴影 */
    .modal{  
        display: none;  
        width: 100%;  
        height: 100%;  
        position: fixed;  
        left: 0;  
        top: 0;  
        z-index: 1000;  
        background-color: rgba(0,0,0,0.5);  
    }  
    .modal-content{  
        width: 50%;    
        height: 40%; 
	max-width: 700px;
        max-height: 500px;  
        margin: 100px auto;  
        border-radius:10px;  
        background-color:#fff;  
        -webkit-animation: zoom 0.6s;  
        animation: zoom 0.6s;   
        overflow: auto;  
    }  
    @-webkit-keyframes zoom{  
        from {-webkit-transform: scale(0)}  
        to {-webkit-transform: scale(1)}  
    }  
    @keyframes zoom{  
        from {transform: scale(0)}  
        to {transform: scale(1)}  
    }  
 
    .close{  
        color: #b7b7b7;  
        font-size: 30px;  
        font-weight: bold;  
        margin-right: 20px;  
        transition: all 0.3s;  
    }  




  </style>
 </head>
 <body>
	<button id="showModel">模态框展示</button>  
	<div id="modal" class="modal">  
		<div class="modal-content">   
				<span class="close">×</span>
		</div>  
	</div>
	
	<script>
		    var btn = document.getElementById('showModel');  
			var close = document.getElementsByClassName('close')[0];    
			var modal = document.getElementById('modal');  
			btn.addEventListener('click', function(){  
				modal.style.display = "block";  
			});  
			close.addEventListener('click', function(){  
				modal.style.display = "none";  
			});  
	</script>
 </body>
</html>

大表哥6

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义一个模态框

&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author&q
复制链接

扫一扫