qq_28139347 2015-05-18 07:48 采纳率: 0%
浏览 2676

js实现页面右下角弹出消息框(类似qq消息)

就是做一个类似qq消息的提示框 在jsp页面显示!急----------------------------------------------------------------

  • 写回答

1条回答 默认 最新

  • danielinbiti 2015-05-18 07:55
    关注
     <html> 
<head> 
<title>JavaScript提示框</title> 
</head> 
<body> 
</body> 
<script type="text/javascript">
var ShowMsg={
    title:'提示',
    content:'模拟qq弹出框消息提醒',
    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>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 求帮我调试一下freefem代码
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图