jquery 弹窗口几秒后消失

最新推荐文章于 2024-01-25 09:15:00 发布
〆WangBenYan゜
最新推荐文章于 2024-01-25 09:15:00 发布
阅读量2.2k
点赞数
分类专栏： Web 前台开发
本文链接：https://blog.csdn.net/qq_18808965/article/details/80424473
版权
Web 前台开发专栏收录该内容
16 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
        <style type="text/css">
            a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{
                margin: 0;
                border: 0;
                padding: 0;
                font-style: normal;
                color: #323232;
                box-sizing: border-box;
                -moz-box-sizing:border-box; /* Firefox */
                -webkit-box-sizing:border-box; /* Safari */
            }
            html,body{
                background: #fff;
                
                margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
            }
            ul{
                text-decoration: none;
                list-style-type: none;
            }
            .video_list>li{
                float: left;
                width: 32%;
                text-align: center;
                border: 1px solid #ccc;
                padding-top: 31%;
                margin-left: 1%;
                margin-top: 1%;
                position: relative;
            }
            .video_list>li>div{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: #09BE07;
            }
            .video_list>li>div>span{
                display: inline-block;
                margin-top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
            }
            .top-left{
            	background: #09BE07;
            	width: 15%;
            	height: 70px;
            	float: left;
            	line-height: 70px;
             	text-align: center;
                font-size:14px;
                font-size:1.4rem; 
                
                display: block;/*块状*/
                /*内联对象需加*/ 
				word-break:keep-all; /* 不换行 */ 
				white-space:nowrap; /* 不换行 */ 
				overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ 
				text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ 				            	           	
            	            	
            }
            .top-center{
            	background: #208EFF;
            	width: 70%;
            	height: 70px;
            	float: left;
             	line-height: 70px;           	
              	text-align: center;
             	display: inline;  
                font-size:14px;
                font-size:1.4rem;             	         	
 
 
                 display: block;/*块状*/
                /*内联对象需加*/ 
				word-break:keep-all; /* 不换行 */ 
				white-space:nowrap; /* 不换行 */ 
				overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ 
				text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ 	           	
            }
            .top-right{
            	background: #46B8DA;
            	width: 15%;
            	height: 70px;
            	float: left;
             	line-height: 70px;
             	text-align: center;
             	display: inline; 
                font-size:14px;
                font-size:1.4rem;             	          	
            	
                display: block;/*块状*/
                /*内联对象需加*/ 
				word-break:keep-all; /* 不换行 */ 
				white-space:nowrap; /* 不换行 */ 
				overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ 
				text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ 	
            }
            
            
            
			.musicleft{
				width: 15%;
				height: calc(100% - 70px);
				background: #FFF5EE;
				float: left;
				position: relative;
			}
			.musiccenter{
				width: 70%;
				height: calc(100% - 70px);
				background: #F5F5F5;
				float: left;
				text-align: center;
				position: relative;
			/*	bottom: 66px;*/
			}
			.musicright{
				width: 15%;
				height: calc(100% - 70px);
				background: #FFF5EE;
				float: right;
				position: relative;
			}
			.logo {
				width: 100%;
			  color: #fff;
			  font-size: 30px;
			  font-weight: bold;
			  font-family: 'Montserrat', sans-serif;
			  padding: 0px 20px 0px 0px;
			}
			a{
				text-decoration: none;
			}
			
			@media screen and (min-width:600px){
			/* .top-right{display: none;}*/
			}
			.savetips{
				width: 220px;
				height: 50px;
				/*border:2px solid #ccc;*/
				border-radius: 20px;
				background: #454545;
				font-size: 16px;
				/*font:bold 0/50px Arial;*/
    			font-family: 'Montserrat', sans-serif;
    			font-weight: bold;
				text-align: center;
				line-height: 50px;
            	position: fixed;
            	top:50%;
            	left: calc(50% - 110px);
            	color: #fff;
            	/*上右下左*/
            	/*margin: 0px 650 0 150px;*/
			}
			/*.savetips h2{height: 50px;line-height: 50px;background: #ddd;text-indent: 5px;border-radius: 20px;}	         */   
        </style>
    </head>
    <body>
    	
    	<div class="top-left"><a class="logo" href="#">所有网音乐</a></div>
    	<div id="topbox" class="top-center">导航栏</div>
    	<div class="top-right">注册登录栏</div>	
    	
    	
    	
    	
		<div id="check" class="musicleft">
			
		</div>
		<div class="musiccenter">
			
        	<div class="swap-turn-list"></div>
		</div>
		<div class="musicright"></div>	    	
        
		<div id="addBox" class="savetips" style="display:none;">正在开发中，敬请期待...</div>
        
        <script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
		    $ (function ()
		    {
		        $ ('#topbox').click (function ()
		        {
		            $ ('#addBox').show ().delay (3000).fadeOut ();
		        });
		    });
		</script>
        
</body>
</html>