Question

用JS DIV CSS 做一个信息提示框。

请问，这样的提示是用js如何做出来，不跟随鼠标，有停留时间，且内部能加连接。而且根据窗体能自动判断自己是向右显示还是向左显示，且一定有这样个箭头。我

请各位朋友帮忙。





Answer 1

<script>
//??ID
function $id(id){
return document.getElementById(id);
}
function ShowMsg(){
document.writeln("
<div style="border:2px solid #AFCEF9;">

</div>
");
document.writeln("
<div>
");
document.writeln("
</div>
");
//????
this.ok_callback=function(){};
this.cancel_callback=function(){};
this.msgobjname=""
this.show=function(msgtitle,msgcontent,selecttype){
var tempobj1=$id("msgdiv");
var tempobj2=$id("overdiv");
var msgobj=this.msgobjname;
tempobj2.style.filter="alpha(opacity=75)";
tempobj2.style.MozOpacity = 75/100;
tempobj2.style.backgroundColor = "#000000";
tempobj2.style.display = '';
tempobj2.style.zIndex= 100;
tempobj2.style.height= document.documentElement.clientHeight+"px";
tempobj2.style.width= document.documentElement.clientWidth+"px";
tempobj2.style.left=0;
tempobj2.style.top=0;
tempobj1.style.display="none";
tempobj1.style.left= (document.documentElement.clientWidth)/3+"px";
tempobj1.style.top= (document.documentElement.scrollTop+(document.documentElement.clientHeight)/3)+"px";
tempobj1.style.display= '';
tempobj1.style.width=400+"px";
tempobj1.style.height=300+"px";
tempobj1.style.zIndex= 200;
tempobj1.style.backgroundColor = "#CDDAF1";
var OutStr;
OutStr="
<div style="font-weight:bolder;text-align:center;font-size:14px;background-color:#6088D2;">
"+msgtitle+"
</div>
"
OutStr=OutStr+"
<div style="text-align:center;font-size:12px;">
"+msgcontent+"
</div>
"
if(selecttype==1){
OutStr=OutStr+"
<div style="text-align:center;font-size:12px;">
<input type="button" value="??" onclick=""+msgobj+".ok()"> <input type="button" value="??" onclick=""+msgobj+".cancel()">
</div>
"
}
else if(selecttype==2){
OutStr=OutStr+"
<div style="text-align:center;font-size:12px;">
<input type="button" value="??" onclick=""+msgobj+".ok()">
</div>
"
}

tempobj1.innerHTML=OutStr;
var md=false,mobj,ox,oy
document.onmousedown=function(ev)
{
var ev=ev||window.event;
var evt=ev.srcElement||ev.target;
if(typeof(evt.getAttribute("canmove"))=="undefined")
{
return;
}
if(evt.getAttribute("canmove"))
{
md = true;
mobj = document.getElementById(evt.getAttribute("forid"));
ox = mobj.offsetLeft - ev.clientX;
oy = mobj.offsetTop - ev.clientY;
}
}
document.onmouseup= function(){md=false;}
document.onmousemove= function(ev)
{
var ev=ev||window.event;
if(md)
{
mobj.style.left= (ev.clientX + ox)+"px";
mobj.style.top= (ev.clientY + oy)+"px";
}
}
}
this.ok = function()
{
$id('msgdiv').style.display='none';
$id('overdiv').style.display='none';
this.ok_callback();
}
this.cancel=function(){
$id('msgdiv').style.display='none';
$id('overdiv').style.display='none';
this.cancel_callback();
}
}
var ShowMsgo=new ShowMsg();
//?????,?????
ShowMsgo.msgobjname="ShowMsgo";
//??????
ShowMsgo.ok_callback=function(){
alert("ok");
}
ShowMsgo.cancel_callback=function(){
alert("cancel")
}
</script>
<a href="javascript:ShowMsgo.show('test','test',1)">Test1</a> <a href="javascript:ShowMsgo.show('test','test',2)">Test2</a>
<p>
<br>

</p>

参考：http://www.360cat.cn/it/note/atk668/info/0-281_0_0.html

追问

此代码试不出来。要就像title或alt样的提示。但并不是替换title.

Answer 2

先是鼠标HOVER效果，显示层，平时隐藏。
之后是判断对象位置，左侧则给层向右的CLASS，右侧则给层向左的CLASS

追问

就是层的左右的判断代码不会写呀。还有层的宽度能根据内容的宽度能大能小。请教代码。

Answer 3

简单的告诉这是当鼠标移到上面的时候是显示div，平常的时候div是隐藏的

Answer 4

用div弹出层