当前位置：网站首页 > 资源显示

js右下角弹窗效果（弹出公告）

发布时间：2017/4/30 20:36:31 / 最后修改：2017-4-30 20:37:01 / 浏览：577

右下角弹窗效果（弹出公告）

完整代码（代码框可以往下拉高显示）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<title>javaScript实现网页右下角弹出窗口代码_www.jbxue.com</title>
<script type="text/javascript">
var ShowMsg={
    title:'温馨提示',
    content:'你有新的短消息，请注意查收！',
    width:'300px',
    height:'100px',
    setTitle:function(value){
        this.title=value;
    },
    setContent:function(value){
        this.content=value;
    },
    getTitle:function(){
        return this.title;
    },
    getContent:function(){
        return this.content;
    },
    show:function(){
        //弹窗div
        var _winPopDiv = document.createElement('div');  
            _winPopDiv.id="_winPopDiv";  
            _winPopDiv.style.cssText = 'width:300px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:block;';
        //消息标题div
        var _titleDiv= document.createElement('div');  
            _titleDiv.id="_titleDiv";   
            _titleDiv.innerHTML=this.getTitle();  
            _titleDiv.style.cssText = 'width:100%; height:22px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:left; font-size:14px;';  
            _winPopDiv.appendChild(_titleDiv);
        //关闭消息按钮span
        var _closeSpan= document.createElement('span');  
            _closeSpan.id="_closeSpan"; 
            _closeSpan.innerHTML="X";
            _closeSpan.style.cssText = 'position:absolute; right:4px; top:-1px; color:#FFF; cursor:pointer;font-size:14px;';  
            _titleDiv.appendChild(_closeSpan); 
        //内容div
        var _conDiv= document.createElement('div'); 
            _conDiv.id="_conDiv";  
            _conDiv.style.cssText = 'width:100%; height:110px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:center;';  
            _conDiv.innerHTML=this.getContent();
            _winPopDiv.appendChild(_conDiv);    
        document.body.appendChild(_winPopDiv);  
        //关闭span绑定事件
        var closeDiv = document.getElementById("_closeSpan");
        if(closeDiv.addEventListener){
            closeDiv.addEventListener("click",function(e){ 
                if (window.event != undefined) {  
                    window.event.cancelBubble = true;  
                } else if (e.stopPropagation) {  
                    e.stopPropagation();  
                }  
                document.getElementById('_winPopDiv').style.cssText="display:none;";
            },false);
        }else if(closeDiv.attachEvent){
            closeDiv.attachEvent("onclick",function(e){  
                if (window.event != undefined) {  
                    window.event.cancelBubble = true;  
                } else if (e.stopPropagation) {  
                    e.stopPropagation();  
                }  
                document.getElementById('_winPopDiv').style.cssText="display:none;";
            });
        }
    }
}; //右下角弹出广告代码
ShowMsg.show();
</script>
</body>
</html>

附件资源（免费）

您尚未登录，暂时无法查阅资源！立即登录

插播广告区

发表评论

您尚未登录，暂时无法发表评论。立即登录

暂无任何评论

推荐资源更多 >>

付费资源更多 >>

广告区