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

版权声明：未经允许，不得转载 https://blog.csdn.net/dhj199181/article/details/84031462

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

   <div id="message-window" class="message-window" style="display:block;">
                    <div id="message-top">
                        <div class="message-top-title">系统消息</div>
                        <div class="message-top-close">
                            <img alt="" src="images/close.png"  class="message-top-close-img" onclick="closeMessageWin();">
                            <div id="message-window-open" onclick="msgWindowShow();" >&gt;&gt;</div>
                        </div>
                    </div>
                    <div id="message-content" class="message-content">内容</div>
            </div>

js代码:

	function resizeMessageWin(){
			var getDiv = document.getElementById('message-window');
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			getDiv.style.left= document.documentElement.clientWidth - getDiv.offsetWidth+'px';
			getDiv.style.top = document.documentElement.clientHeight-getDiv.offsetHeight +scrollTop +'px';
	}
	
	window.onscroll= window.onresize = window.onload = function (){
		resizeMessageWin();
	}
	function closeMessageWin(){
		$("#message-content").hide();//隐藏内容主题
		$('.message-top-close img').hide();
		$("#message-window-open").show();//折叠后的div
		resizeMessageWin();
	}
	
	function msgWindowShow(){
		$("#message-content").fadeIn(2000);
		$('.message-top-close img').show();
		$("#message-window-open").hide();
		resizeMessageWin();
	}

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;
}

效果图:

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