如何实现在指向链接时，显示一个小窗口?

Question

图片显示不了，也就是CSDN里面有的效果，把鼠标放指向左边的发帖或回复人的图像上，显示一个窗口
这个是怎么实现的？

Answer 1

在你的Show_Window()函数中调用你定义好的一个函数，这个函数就是你所显示的那个对话框
比如：
  function Show_Window() 
{   top.isok("显示内容","标题".....);//根据情况传递参数
} 在另外一个js文件里定义这个函数
 
function isok(question,title,width,height)
{
var content =  " ";
content += "<table border='0' cellpadding='10' cellspacing='0' width='100%' align='center'>";
content += " <tr>";
content += " <td rowspan='2' style='text-align:right;'>";
content += " <img src='" + imgPath + "icon-question.gif' />&nbsp;&nbsp;";
content += " </td>";
content += " <td style='font-size:14px;'>";
content += " &nbsp;&nbsp" + question + "?<br/>";
content += " </td>";
content += " </tr>";
content += " <tr>";
content += " <td>&nbsp;</td>";
content += " </tr>";
content += "</table>";
content += "<table border='0' cellpadding='5' cellspacing='0' width='100%'>";
content += " <tr>";
content += " <td width='20%'>";
content += " </td>";
content += " <td>";
content += " &nbsp;&nbsp;<input type='button' class='queding' onclick='window.frames[\""+frameName+"\"].okDao(\""+object+"\")';"
content += " value='是' />";
content += " &nbsp;&nbsp;";
content += " <input type='button' class='queding' onclick='HideConfig()'";
content += " value='否' />";
content += " </td>";
content += " </tr>";
content += "</table>"; jqModalWin(content, title, width, height );
}
在你定义的jquer工具包里定义jqModalWin（）这个函数，
function jqModalWin(sContent, sTitle, width, height, callback){
if ( $("#tb_alertWin").size() == 0 )
genModal(); $("#tb_alertWin").jqm({overlay: 50, modal: true, trigger: false, onHide: function(h){h.w.hide();if(h.o) h.o.remove();$("#tb_alertWinContent").get(0).innerHTML="";}});
$("#tb_alertWinContent").html(sContent);
if(sTitle)
$("#tb_alertTitle").html(sTitle);
if (width)
{
$("#tb_alertWin").width(width+"px");
}

if (height)
{
$("#tb_alertWin").height(height+"px");
} if( $.browser.msie )
$("#tb_alertWin").jqmShow().center();
else
$("#tb_alertWin").jqmShow().center(); if(callback){
$(".jqmClose").click(function(){
callback();
});
}
}
剩下的就是<a href="" onmouseover="Show_Window()">超链接 </a> 这样就可以了，你试试看吧

Answer 2

汗！又是一个问JS模拟IDV的问题
不明白为什么这么多人问同一个问题，而不自己先搜索下资料

Answer 3

<style>
#lay1{
border: 1px solid #aaa;
position: absolute;
z-index: 99
background: url('http://ialvin.cn/blog/skins/hello_world/bg.jpg');
padding: 2px;
font-size: 12px;
}
</style><div id='lay1' style='display:none; background:#fff;' onMouseOver="this.style.display='';" onMouseOut="hide()">&nbsp;</div>
<span id="Span1"></span>
</div> 
<script type='text/javascript'>
var lay = document.getElementById("lay1");
function mouseX(event) {
return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
}
function mouseY(event) {
return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
}
function setPos(event) {
lay.style.left = mouseX(event) + "px";
lay.style.top = mouseY(event) + "px";
}
function show(m) {
lay.innerHTML = m.parentNode.childNodes[0].innerHTML;
lay.style.display = '';
}
function hide() {
lay.style.display = 'none';
}
document.onclick = function(e) {
e = window.event || e;
var src = e.srcElement || e.target
if (src != lay) hide();
};
</script>
<span><div style='display:none;'>
1帐号：ReserveRainbow<br />
昵称：预约彩虹<br />
最新帖子：<br /><br />
如何实现在指向链接…<br />
如何实现在热身链接…<br />
更多帖子...
  </div>
  <a onmouseover="setPos(event);show(this);" onmouseout="">过来</a>
</span><span><div style='display:none;'>
2帐号：ReserveRainbow<br />
昵称：预约彩虹<br />
最新帖子：<br /><br />
如何实现在指向链接…<br />
如何实现在热身链接…<br />
更多帖子...
  </div>
  <a onmouseover="setPos(event);show(this);" onmouseout="">过来2</a>
</span><span><div style='display:none;'>
3帐号：ReserveRainbow<br />
昵称：预约彩虹<br />
最新帖子：<br /><br />
如何实现在指向链接…<br />
如何实现在热身链接…<br />
更多帖子...
  </div>
  <a onmouseover="setPos(event);show(this);" onmouseout="">过来3</a>
</span>

Answer 4

找了两天了麻烦xinglongjian能不能把那个例子整到一个html文件里，我整合了半天还是出错，谢谢了