2012-01-19 4 views
2

私はモーダルコンテンツを閉じる必要があるが、ユーザーがページの特定の部分にマウスを置いたときにモーダルスタイルのコンテンツを表示する必要があるWebアプリケーションを使用しています。自動閉じるユーザーがマウスを移動した後の単純なモーダル?

私は現在SimpleModalと働いていますが、表示するように働いていますが、閉じる必要があります。誰もがマウスの動きに基づいて閉じる方法を知っていますか?または類似。

または私が使用できる別のコンポーネント。効果的に私たちがやっていることは、あまりにも堅牢なツールチップを表示していることです。それはまるでiFrameコンテンツです。したがって、iFrameを表示するのをサポートするjQueryのツールチップ機能について知っていれば、うまく動作します。

答えて

2

あなたが見ている振る舞いを実際に反映しているツールチッププラグインを使いやすくないでしょうか(要素をホバリングするとボックスを表示/非表示)?

qTipと思います。

簡単なツールチップを表示したり、Ajaxでコンテンツを読み込んだり、高度なコンテンツ(テキストだけでなく)を表示したり、高度なスタイリングが可能で、完全なAPIを提案することができます。一方


、私はSimpleModalについて多くを知らないとあなたはどんなJavaScriptを表示しないように、私はあなたが実際にモーダルダイアログを作成する方法を推測することができます。

とにかく、jQueryは、マウスで要素を入力して放置する場合を処理する方法を提案しています(.hover())。だから私はjQueryのからmouseleave()と一緒にそれを使用することをお勧めしますが

$.modal.close() 

を行うSimpleModalを閉じるには

$('#myelement').hover(
    // this function is executed when entering the element with the mouse 
    function(e) { 
     // create you SimpleModal here 
    }, 
    // this one when leaving 
    function(e) { 
     // close it here 
     // from the SimpleModal doc, you close the currently opened modal with 
     $.modal.close() 
    } 
); 

DEMO

1

:あなたはこのように使用しています。

$("SELECTOR_FOR_YOUR_AREA").mouseleave($.modal.close); 
関連する問題