2025-04-30

彈出層


view plain
<!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" xml:lang="en"> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <style type="text/css"> 
        *{margin:0;padding:0;} 
        body{background:#fff;font-size:12px;} 
        .drag_wrap{width:500px;height:300px;position:absolute;border:1px solid #ccc;display:none;z-index:3;background:#fff;} 
        .drag_wrap h1{position:relative;height:35px;line-height:35px;text-indent:1em;font-size:14px;cursor:move;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;} 
        .drag_wrap h1 span{position:absolute;font-size:12px;bottom:1px;right:10px;cursor:pointer;} 
        .drag_cont{padding:10px;line-height:23px;text-indent:2em;} 
        .mask{position:absolute;left:0;top:0;z-index:2;background:#000;filter:alpha(opacity=50);opacity: 0.5;} 
        .in{margin:50px auto;width:80px;} 
    </style> 
</head> 
<body> 
    <p class="in"><input type="button" value="猛擊我" onclick="drag.init().move('drag')" /></p> 
    <p class="in"><a href="###" onclick="drag.init('drag2').move('drag2')">鐵道部回應京滬高鐵頻出故障:設備處於磨合期</a></p> 
     
    <p id="drag2" class="drag_wrap"> 
        <h1>鐵道部回應京滬高鐵頻出故障<span>關閉</span></h1> 
        <p class="drag_cont"> 
            <p>各位網友好!首先我要感謝人民網強國論壇為我提供與廣大網友再聚的機會。在我來之前,看瞭許多網友的留言,其中就有一位網友提醒我要做好挨罵和挨拍的準備。是的,今天來到這裡,就是代表鐵路系統向大傢真誠道歉、說明情況。京滬高鐵開通半個月以來,總體客流和服務情況是好的。但近幾天連續發生故障,影響列車正常運行</p> 
            <p>6月30日,京滬高鐵開通運營。請您介紹一下總體運營情況,比如開行列車數量、運送旅客人數、正點率、安全情況等。</p> 
        </p> 
    </p> 
     
    <script type="text/javascript"> 
        var drag = { 
            $: function(){ return document.getElementById(arguments[0]);}, 
             
            /**
             * 得到視口的大小
             */ 
            getWindowsSize: function(){ 
                var de = document.documentElement, 
                    pageWidth = window.innerWidth, 
                    pageHeight = window.innerHeight; 
                if(typeof pageWidth != 'number'){ //如果pageWidth不是數字,則ie,非ie支持innerWidth 
                    if(document.compatMode == 'CSS1Compat'){ //Standars mode 標準模式,完整dtd 
                        pageWidth = de.clientWidth; 
                        pageHeight = de.clientHeight; 
                    } else { //如果是 Quirks mode 
                        pageWidth = document.body.clientWidth; 
                        pageHeight = document.body.clientHeight; 
                    } 
                } 
                return { 
                    width: pageWidth, 
                    height: pageHeight 
                } 
            }, 
             
            /**
             * 創建標簽
             * @param {String} target 標簽名稱,為空則創建一個空的p
             * @param {Object} config 屬性列表
             */ 
            createElement: function(target, config){ 
                target = target || 'p'; 
                config = config || {}; 
                 
                var tag = document.createElement(target); 
                for(var p in config){ 
                    if(p.toLowerCase() == 'style'){ 
                        tag.style.cssText = config[p]; 
                    } else if(p.toLowerCase() == 'class' || p.toLowerCase() == 'cls'){ 
                        tag.className = config[p]; 
                    } else if(p.toLowerCase() == 'innerHTML'){ 
                        tag.innerHTML = config[p]; 
                    } else { 
                        tag.setAttribute(p, config[p]); 
                    } 
                } 
                //此處try為釋放tag引用,否則創建的DOM永遠無法被釋放 
                try{ 
                    return tag; 
                } finally { 
                    tag = null; 
                } 
            }, 
             
            getEvent: function(event){ 
                return event ? event : window.event; 
            }, 
             
            init: function(id){ 
                var that = this, 
                    ele = this.$(id) || false, 
                    winWidth = this.getWindowsSize().width, 
                    winHeight = this.getWindowsSize().height; 
                 
                if(!ele) { 
                    ele = this.createElement('p', { 
                        id: 'drag', 
                        cls: 'drag_wrap' 
                    }); 
                    var h1 = this.createElement('h1'); 
                    h1.innerHTML = '我是標題欄'; 
                    var span = this.createElement('span'); 
                    span.innerHTML = '關閉'; 
                    var cont = this.createElement('p', { 
                        cls: 'drag_cont' 
                    }); 
                    cont.innerHTML = '<p>上半年,面對復雜多變的國際形勢和國內經濟運行出現的新情況新問題,黨中央、國務院堅持實施積極的財政政策和穩健的貨幣政策,不斷加強和改善宏觀調控,經濟運行總體良好,繼續朝著宏觀調控預期方向發展。</p><p>初步測算,上半年國內生產總值204459億元,按可比價格計算,同比增長9.6%;其中,一季度增長9.7%,二季度增長9.5%。分產業看,第一產業增加值15700億元,增長3.2%;第二產業增加值102178億元,增長11.0%;第三產業增加值86581億元,增長9.2%。從環比看,二季度國內生產總值增長2.2%。</p>'; 
                     
                    h1.appendChild(span); 
                    ele.appendChild(h1); 
                    ele.appendChild(cont); 
                    //ele.style.display = 'block'; 
                     
                    document.body.appendChild(ele); 
                     
                    span.onclick = function(){ 
                        document.body.removeChild(ele); 
                        document.body.removeChild(oMask); 
                    } 
                } else { 
                    var handler = ele.getElementsByTagName('h1')[0], 
                        close = handler.getElementsByTagName('span')[0]; 
                         
                    close.onclick = function(){ 
                        ele.style.display = 'none'; 
                        document.body.removeChild(oMask); 
                    } 
                } 
                 
                var oMask = this.createElement('p', { 
                    cls: 'mask' 
                }); 
                oMask.style.cssText = 'width:' + winWidth + 'px;height:' + winHeight + 'px;'; 
                 
                document.body.appendChild(oMask); 
                 
                ele.style.display = 'block'; 
                ele.style.left = (winWidth – ele.offsetWidth)/2 + 'px'; 
                ele.style.top = (winHeight – ele.offsetHeight)/2 + 'px'; 
                 
                return this; 
            }, 
             
            move: function(id){ 
                var that = this, 
                    ele = this.$(id), 
                    winWidth = this.getWindowsSize().width, 
                    winHeight = this.getWindowsSize().height, 
                    posx, 
                    poy; 
                 
                if(!ele) return false; 
                 
                var handler = ele.getElementsByTagName('h1')[0], 
                    close = handler.getElementsByTagName('span')[0]; 
                handler.onmousedown = function(e){ 
                    evt = that.getEvent(e); 
                    posx = evt.clientX – parseInt(ele.style.left); 
                    posy = evt.clientY – parseInt(ele.style.top); 
                     
                    if (handler.setCapture) { //防止ie下拖動過快丟失對象 
                        handler.setCapture(); 
                    } else if (window.captureEvents) { 
                        window.captureEvents(e.MOUSEMOVE | e.MOUSEUP); 
                    } 
                     
                    document.onmousemove = function(e){ 
                        e = that.getEvent(e); 
                        var l = e.clientX – posx, 
                            t = e.clientY – posy; 
                             
                        if(l < 0){ 
                            l = 0; 
                        } else if(l > winWidth – ele.offsetWidth){ 
                            l = winWidth – ele.offsetWidth; 
                        } 
                         
                        if(t < 0){ 
                            t = 0; 
                        } else if(t > winHeight – ele.offsetHeight){ 
                            t = winHeight – ele.offsetHeight; 
                        } 
                         
                        ele.style.left = l + 'px'; 
                        ele.style.top = t + 'px'; 
                         
                        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消選擇文本 
                    } 
                }; 
                 
                document.onmouseup = function(e){ 
                    e = that.getEvent(e); 
                     
                    if (handler.releaseCapture) { 
                        handler.releaseCapture(); 
                    } else if (window.captureEvents) { 
                        window.captureEvents(e.MOUSEMOVE | e.MOUSEUP); 
                    } 
                     
                    document.onmousemove = null; 
                }; 
                 
                return this; 
            }, 
             
            close: function(id){ 
                var that = this, 
                    ele = this.$(id); 
                     
                if(!ele) return false; 
                ele.style.display = 'none'; 
            } 
        } 
         
    </script> 
</body> 
</html> 

作者“嶽靜的博客”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *