悬浮框

页面打开的时候出来一个悬浮框，不用格式，只要能显示些文本就可以。别再网上乱找代码，写几句能用的，解释下

解决方案 »

  1.   

    1.IE7、Firefox、Opera，都支持CSS的{position:fixed}
    通过它可以让HTML元素脱离文档流固定在浏览器的某个位置
      

  2.   

    用jquery的ajax请求到后台 把数据封装成json格式  （至于怎么封装成json格式 你在网上找 有很多 不难）
    然后在回调函数里处理数据 
    这是客户端的js：
    function showTelegramResult(url){     
       $.getJSON(
    url,//向后台请求的url
      function(json) {        
        var title = '';
        var content = '未查询到相应报文';
    var statusChangeInfo = [];//用于存储一个航班对应的多个报文内容的数组
    //遍历json  
    var count =0;
    for (var key in json) {
    var value = json[key]; //根据key 取得对象
    var flightid = value.flightid;
    var teletype = value.teletype;
    var rawmsg = value.rawmsg;
    var date = value.fddate;
    var year = date.substring(0,4);
    var month = date.substring(4,6);
    var day = date.substring(6,8);
       //设置报文内容 为标题添加日期         
        if(rawmsg!=null && rawmsg!=''){             
          content =' <pre><code>'+rawmsg+'</pre></code>';       
          count +=1;
          //title = '航班：' + flightid+' '+year+'年'+month+'月'+day+'日'+' '+teletype+ '报文：';//设置窗体标题 
        }
            //添加报文内容                    
    statusChangeInfo.push([content]);
        }          
           
            if(count == 0){ 
                //添加提示信息  '没有相应报文'
                 content =' <pre><code><b>'+content+'</b></pre></code>';                                
         statusChangeInfo.push([content]);            
            }else{ 
                //完善窗体标题 增加报文条数的显示
                 title = title+count+'条报文信息';
            }
            //显示对话框    
      parent.window.showFloatDialog(title,statusChangeInfo);
            });
    }/**
     * 显示浮动对话框
     */
    function showFloatDialog(title,statusChangeInfo) {
    var id = new Date().getTime();
    var dom = '<div id="' + id + '">';
     for ( var i = 0; i < statusChangeInfo.length; i++) {
      dom += '<div id="' + id +i+ '" style="font-size:13px;">' + statusChangeInfo[i] + '</div>'       
      if(statusChangeInfo.length > 1 && i < statusChangeInfo.length-1){
      dom += '<hr width="100%" size=1 color=#5151A2 align=center>';
      }
     }
    dom = dom + '</div>';
    $(document.body).append(dom);
    $('#' + id).dialog({
        stack:true,
        //设置哪个层显示在最前端 值越大越显示在前端 div默认值是1000
        zIndex:1002,
    title: title,
    ////最小宽度
    width: 500,
    //最小高度
    height: 300,
    //位置
    //position: ['right','bottom'] ,
    //是否为模式对话框
    modal: true,
    //是否可以拖动
    draggable: false,
    //是否可以调整大小
    resizable: false,
    //显示效果
    show: 'fade',
    //隐藏效果
    hide: 'fade',
    //是否初始化后自动显示
    autoOpen: false,
    //是否按ESC后关闭
    closeOnEscape: true,
    //添加’确定‘按钮
    buttons: {
    确定: function() {
    $( this ).dialog('close');
    }
    },
    close: function(event, ui) {
    $('#' + id).remove();
    }
    });
    $('#' + id).dialog('open');}
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <title>zell419</title>
            <style type="text/css">
                #left{position:fixed;_position:absolute;top:100px;_top:100px;left:100px;_left:100px; _margin-top:expression(this.style.pixelHeight+document.documentElement.scrollTop)} 
            </style> 
        </head> 
        <body style="height:5000px;"> 
        <div id="left"># left </div>
        </body> 
    </html>看看可以不 。自己调整top left ~