2012-03-29 16 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

それはたぶん私はあなたを理解していなかったトラブル – pushistic

+0

せずに動作しますあなたはリフトツールチップをしたい場合は...そして、あなたが使用することができ、「トップ:-Npx」または「マージントップ:-Npxは」 – pushistic

+0

イムとして、ここで、 http://i54.tinypic.com/246w57lの上に画像を投稿するalowwedありません。 png モーダルウィンドウは黄色の長方形のようになり、ツールチップは紫色の長方形のようになります。 – user1266343

答えて

0

私のバージョンで試して変更

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

ため

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

(1.5)改札のモーダルウィンドウが20001のzインデックスを持っている、あなたは(放火魔で検査しなければなりませんか、 「<!DOCTYPE HTML>」とwathever)あなたモーダルウィンドウ

+0

それでも私のためにはうまくいかなかったのですが、私は1.4.18バージョンを使用しています。 – user1266343

関連する問題