カバー移動層をイジェクト
6965 ワード
以前のプロジェクトで使用しましたが、IEの下でテストが可能です.今日はFFに対応できるように修正します.
var $;
var lastScrollY = 0;
var currentMoveObj = null; //
var relLeft; //
var relTop;
/***************************
* : (ID)
***************************/
if (!$ && document.getElementById) {
$ = function() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string') {
element = document.getElementById(element);
}
if (arguments.length == 1) {
return element;
}
elements.push(element);
}
return elements;
};
} else if (!$ && document.all) {
$ = function() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string') {
element = document.all[element];
}
if (arguments.length == 1) {
return element;
}
elements.push(element);
}
return elements;
};
}
/**************************************
* : ,
**************************************/
function Alf() {
return (self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight);
}
function Aml() {
return (document.documentElement.offsetWidth || document.body.offsetWidth);
}
/**************************************
* :
**************************************/
function showMsgWin(msg,tit) {
setHideEleByTagName("select","none");
tit = (tit == null)?" ":tit;
var dd_html = "";
tipsConv = document.createElement("DIV");
tipsConv.id = "tipsConv";
tipsConv.oncontextmenu = function(){return false;};
tipsConv.onSelectstart = function(){return false;};
tipsConv.style.cssText = "background-color:#CCCCCC;position:absolute;z-index:100;filter:alpha(opacity=60);";
tipsConv.style.width = document.body.clientWidth;
tipsConv.style.height = Alf();//document.body.scrollHeight;
//tipsConv.style.pixelTop = 0;
tipsConv.style.left = 0;
tipsConv.style.top = 0;
tipsConv.style.display = "block";
tipsConv.style.opacity="0.5";
document.body.appendChild(tipsConv);
dd_html += '<div style="text-align:center;border:solid 2px #C3D9FF;background:#ffffff">';
dd_html += ' <div id="tip" onmousedown="f_down(event);" onmousemove="f_move(event);" onmouseup="f_mouseup(event);" style="float:top;top:0px;width:100%;height:20px;background:#C3D9FF">';
dd_html += ' <p>' + tit + '</p>';
dd_html += ' </div>';
dd_html += ' <div style="background:#ffffff">';
dd_html += ' <p> </p>';
dd_html += ' <font color="red">';
dd_html += ' <p>' + msg + '</p>';
dd_html += ' </font>';
dd_html += ' <p> </p>';
dd_html += ' <p align="center"><a href="javascript:closeTips()">【 】</a> </p>';
dd_html += ' </div>';
dd_html += '</div> ';
tips = document.createElement("DIV");
tips.id = "tipDiv";
tips.innerHTML = dd_html;
tips.style.cssText = "width:390px;position:absolute;z-index:100;";
//tips.style.pixelTop = lastScrollY + 120;
tips.style.top = lastScrollY + 120;
tips.style.left = (document.body.offsetWidth - 400) / 2;
tips.style.display = "block";
document.body.appendChild(tips);
//drag("tipDiv");
}
function closeTips(){
setHideEleByTagName("select","");
if($("tipsConv")){
document.body.removeChild($("tipsConv"));
}
if($("tipDiv")){
document.body.removeChild($("tipDiv"));
}
if($("tipIFrame")){
document.body.removeChild($("tipIFrame"));
}
}
/****************************
* :
*****************************/
function setHideEleByTagName(tagName,sty1){
var tmp = document.getElementsByTagName(tagName);
for(var i = 0; i < tmp.length; i++){
tmp[i].style.display = sty1;
}
}
/*********************
*
*LUMIN2008-09-11
* :2010-02-24
**********************/
function f_down(ev){
ev = (ev)?ev:window.event;
currentMoveObj = $("tipDiv"); // ,
currentMoveObj.style.position = "absolute";
$("tip").style.cursor = "move";
//document.ondragstart = "return false;"
//document.onselectstart = "return false;"
document.onselect = "document.selection.empty();"
relLeft = ev.clientX+document.body.scrollLeft-currentMoveObj.offsetLeft;
relTop = ev.clientY+document.body.scrollTop-currentMoveObj.offsetTop;
//if(currentMoveObj.setCapture)currentMoveObj.setCapture();
//else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
function f_mouseup(ev) {
//if(currentMoveObj.releaseCapture) currentMoveObj.releaseCapture();
//else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
$("tip").style.cursor = "";
currentMoveObj = null; //
document.ondragstart = null;
document.onselectstart = null;
document.onselect = null;
}
function f_move(ev) {
if(currentMoveObj != null && currentMoveObj==$("tipDiv")){
ev = (ev)?ev:window.event;
$("tip").style.cursor = "move";
currentMoveObj.style.left=ev.clientX+document.body.scrollLeft-relLeft;
currentMoveObj.style.top=ev.clientY+document.body.scrollTop-relTop;
}
}
テスト: <script type="text/javascript" charset="gb2312" language="javascript" src="common.js"></script>
<input type="button" value="show" onclick="showMsgWin('hello this is my test demo!')"/>