jQueryを使ってページ上の要素をモーダルにする(ダイアログではない)

私はかなりjQueryを新しくしているので、うまくいけばこれはあまりにも厳しいものではありません。私は簡単な例に固執しようとします。

私がそれにdivを持つWebページを持っていると仮定しましょう(img、spanなどの他の要素かもしれません)。ユーザーがそのdivの上を移動すると、divを変更しないでくださいが、他のすべてにオーバーレイが適用され、残りはグレー表示されます。したがって、本質的には、モーダル(modal dialog)に似ているように、このdivビューを作成します。 divを同じ場所に置いて、背景色を同じにしたい

私はモーダルダイアログを行う例を見いだしましたが、それは常にスクリーンに集中します。同じ場所に要素を残すことができれば、機能は機能します。何か案は?

ありがとう! ジム

1
モーダルダイアログは中央にある必要はないので、モーダルのコードの例を見つけたら、位置を設定する部分を削除するだけで済みます。 (berry_lthirdの答えは、あなたの要件をどのように実装するかを示しています。)
追加された 著者 nnnnnn,

2 答え

私はこれをこのように見ることにしました。

http://jsfiddle.net/uEwry/2/

  1. どの要素がモーダル効果をトリガーするかを検出するクラスを作成します。
  2. 要素を複製してモーダル効果をトリガーするとき
  3. 既存の要素の上に複製された要素を配置する
  4. 複製された要素のマウスアウト時に、エフェクトを元に戻してクローンを削除します。

 

.gomodal { border: 1px dotted red; background: white; }
.modal { border: 1px solid black; position: fixed; top: 0; left: 0; }
#grayout { background: lightgray; opacity: .8; display: none; position: fixed; }


$('.gomodal').mouseover(function() {
    var cloned = $(this)
        .clone()
        .addClass('modal')
        .css('top', $(this).offset().top)
        .css('left', $(this).offset().left); 
    $('body').append(cloned);
    $('#grayout').css('height', $(document).height()).css('width', $(document).width()).fadeIn();
});

$('body').on('mouseout', '.modal', function() {
    $('#grayout').fadeOut();
    $(this).remove();
});
3
追加された
いいえ、私はそうは思わない。灰色の影に穴を突き刺すことはできません。グレーの影を除いて、クローンされた要素を透明にすることもできません。私はあなたがこの制限なしに解決策を見つけるとは思わない。
追加された 著者 mrtsherman,
ええ、私はそれが可能だと思います。あなたは別のSOの質問でそれを聞きたいかもしれません。実際には、透明なボーダーを使用して「穴」効果を得ることができるということが私にはたまたま起こりました。 +6 でこの質問を参照してくださいstackoverflow.com/questions/2270034/…
追加された 著者 mrtsherman,
答えをありがとう、これは近いです。残りの唯一の問題は、divに背景色が指定されていることを確認できないことです。あなたの例で.gomodalから背景色を削除すると、divは他のすべてと同様にグレー表示になります。これを回避する方法はありますか?
追加された 著者 NorthFork,
応答のためのクールなおかげで、もう少し迅速な関連の質問。どのような親要素がdivから背景色を取得しているかを調べるためにDOMをトラバースできる方法はありますか?たとえば、divがbodyタグの黄色を介して表示されていることがわかった場合、ホバーの期間、divに一時的に黄色を割り当てることができます。それは理にかなっていますか?
追加された 著者 NorthFork,

あなたが「グレーアウト」と言うと、「シャドーボックス」のような意味ですか?つまり、ページ上の他のすべての要素の上に置かれている色合いですか?

そうであれば、半透明に設定された不透明度の設定でボディ全体に絶対配置されたdivを作成します。そのdivにz-indexスタイルを他のものよりも優先させ、その表示スタイルを "none"に設定します。これはあなたの「シャドーボックス」として役立ちます。

ユーザーがターゲットdivとやりとりするときは、そのZ-インデックススタイルをシャドウボックスdivよりも高く変更し、シャドウボックスの表示スタイルを「ブロック」に設定します。ユーザーが対話を完了したら、逆の操作を行います。

これがあなたが探していたものか、コード例が必要なのかどうか私に教えてください。

1
追加された