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

Posted 2023-03-15

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

请各位朋友帮忙。

参考技术A <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.

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

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

参考技术C 简单的告诉这是当鼠标移到上面的时候是显示div，平常的时候div是隐藏的 参考技术D 用div弹出层