0

リスト エントリにマウスを合わせると Javascript モーダル ポップアップ ウィンドウが表示され、マウスがリンク (またはモーダル ポップアップ) から離れると消えます。これにより、ユーザーは X をクリックしてウィンドウを移動する必要がなくなります。あちらへ。ウィンドウの目的は、ユーザーがクリックしたり新しいページに移動したりせずに、リンクに関する詳細情報を提供することです。

jQueryのホバーを使用しています：

// Function called to open the window:
function openModalPopupWindow() 
{
  document.getElementById('modalMask').style.display = 'inline-block';  // Make the modal popup stuff visible
} 

// Function called to close the window:
function closeModalPopupWindow() 
{
  document.getElementById('modalMask').style.display = 'none';      // Make the modal popup stuff invisible:
} 

$("li").hover(
  function (e) {
    $(this).append($("<span> ***</span>"));
    openModalPopupWindow ();
  }, 
  function (e) {
    $(this).find("span:last").remove();
    closeModalPopupWindow ();
  }
);

この HTML ファイルで:

<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
  <link rel="stylesheet" href="modal.css" id="css">
</head>
<body>
 <ul>
     <li>Coke</li>
     <li>Pepsi</li>
     <li>R. C.</li>
 </ul>

 <div id="modalMask">
  <div id="modalContent">
   <p>This is a "modal" popup window.</p>
  </div>
 </div>
 <script src="modal.js"></script>
</body>
</html>

問題は、項目の上にマウスを移動すると、モーダル ポップアップが表示されたり表示されなくなったりすることです。ここにはフォーカスのようなものがあると思います。ポップアップが表示されると優先されるため、マウスを移動すると、マウスポインターがリスト要素の上に移動しなくなり、モーダルポップアップが消えます。しかし、マウスポインタが再び要素の上にあるため、戻ってきます。

このジッターを解消する良い方法は何ですか?

ティア。

4

1 に答える 1