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 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件