彈出層
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>
作者“嶽靜的博客”