js右下角弹出提示框示例代码

系统管理员 2021-09-27 19:04 551阅读 0赞

**废话不多说，直接上代码  
html页面代码:**

**js代码:**

**css代码:**

/*消息框整个div*/
    #message-window {
    		background-color: #FFF;
    		border: 1px solid #DDDDDD;
    		text-align: center;
    		line-height: 40px;
    		font-size: 12px;
    		font-weight: bold;
    		z-index:99;
    		width: 320px;
    		position:absolute;/*IE6*/
    }
    
    #message-top{
    	background:#0084FF;
    	width: 100%;
    	height: 35px;
    }
    
    /*消息提醒框标题*/
    .message-top-title{
    	text-align: left;
    	float:left;
    	padding-left:3px;
    	width: 50%;
    }
    
    .message-top-close{
    	text-align: right;
    	float:left;
    	width: 48%;
    }
    .message-content{
    	height: 340px;
    }
    
    /*关闭图片*/
    .message-top-close-img{
    	margin-top: 10px;
    	margin-right:4px;
    	-webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
    }
    
    /*设置关闭图片旋转*/
    .message-top-close-img:hover{
    	transform:rotate(360deg);
    	-ms-transform:rotate(360deg); /* IE 9 */
    	-webkit-transform:rotate(360deg); /* Opera, Chrome, and Safari */
    }
    
    /*消息框折叠*/
    #message-window-open{
    		display: none;
    		color: #fff;
    		margin-right:4px;
    		font-size: 15px;
    }

效果图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RoajE5OTE4MQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RoajE5OTE4MQ_size_16_color_FFFFFF_t_70 1][]  
以上代码本人请自测试过可以使用，有需要的可以拿去使用，不喜勿喷。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RoajE5OTE4MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181113164756233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RoajE5OTE4MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RoajE5OTE4MQ_size_16_color_FFFFFF_t_70 1]: /images/20210923/2ae5b2f4a60c423199dea454168e438b.png