2012-03-29 78 views
2

下面是我写的用于显示工具提示内容的代码。由于模态窗口小于工具提示内容,因此我需要在模态窗口上方显示工具提示内容,而不是在内部生成它。我尝试使用Z-index,但它并没有工作。任何人都可以帮我解决这个问题吗?如何在模态窗口上方显示工具提示内容?

<html> 
     <head> 
     <wicket:head> 
       <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/> 
       <link rel="stylesheet" type="text/css" href="css/SendTestEmailPanel.css"/> 
       <script src="/scripts/bt-0.9.5-rc1/jquery.bt.min.js" type="text/javascript"></script> 
       <script src="/scripts/jquery.hoverIntent.minified.js" type="text/javascript"></script> 
       <script src="/scripts/bgiframe_2.1.1/jquery.bgiframe.min.js" type="text/javascript"></script> 

     </wicket:head> 

</head> 
<body> 
<wicket:panel xmlns:wicket="http://wicket.apache.org/"> 

     <div id="send-test-email-panel"> 
       <h1>Test</h1> 
           <div id="tool-tip-div"> 
             <div style="float:left; margin-top:4px; margin-left:275px;position:absolute;z-index:2"> 
              <span class="help" id="email-address-tooltip" title="placeholder_text">&nbsp;</span> 
             </div> 
           </div> 
     </div> 
     <div id="email-tooltip-content" style="display:none"> 
       <ul> 
         <li>To preview what your email fans will see, enter your email address and send a test to yourself.</li> 
         <li>Links and buttons will be inactive in the test email. </li> 
         <li>In the live email, the Grab It Now button links to your offer. If your fan is on a desktop computer, they will see the full web version of your offer. If they are viewing the email on their phone, they'll go directly to the mobile version of your offer.</li> 
       </ul> 
     </div> 
     <script type="text/javascript">                  
       var trigger = ['mouseover', 'mouseout']; 
       var width = '180px'; 
       var pos = 'right';      

       ShowPopup($('#email-tooltip-content'), 
       $('#email-address-tooltip'), 
       trigger, 
       "$('#email-tooltip-content').html()", 
       width, 
       pos 
     );    
     </script> 
</wicket:panel> 
</body> 
</html> 
+0

用“<!DOCTYPE html>”工作没有问题 – pushistic 2012-03-29 06:45:12

+0

也许我不理解你..如果你想要提升工具提示,你可以使用“top:-Npx”或“margin-top:-Npx” – pushistic 2012-03-29 06:50:59

+0

因为我没有alowwed张贴图像在这里, http://i54.tinypic.com/246w57l。 png 模态窗口将像黄色矩形一样,工具提示将像紫色矩形一样。 – user1266343 2012-03-29 09:21:26

回答

0

尝试改变

<div style="float:left; margin-top:4px; margin-left:275px;position:absolute;z-index:2;"> 

<div style="float:left; margin-top:4px; margin-left:275px;position:absolute;z-index:30001;"> 
在我的版本(1.5)检票口的模态窗口

有20001的z-index,你应该使用Firebug检查(或wathever)你的模态窗口

+0

仍然没有为我工作:(即时通讯使用1.4.18版本。 – user1266343 2012-04-02 06:53:19