要素にフォーカスを設定し、残りの要素をオーバーレイする方法

-2

http://robertnyman.com/fat/index.htm ライブラリには、必要な要素をフォーカスして残りの要素をオーバーレイする機能が追加されます。それはいくつかの要素に焦点を当てるのに役立ちます。要素にフォーカスを設定し、残りの要素をオーバーレイする方法

それを持つ同じライブラリはありますか？ここで

出典

2011-12-25 Ariona Rian

の詳細をお願いしています。？ –

よくこのライブラリは素晴らしかったが、フェーディン効果はそれほど素晴らしいものではありません。私はこのような別のライブラリがあることを知っていますが、私はリンクが何であるか忘れていました。 –

あなたは非常に軽量のjQuery/CSS3の設定をしたい場合は、使用してみてください可能性があり、クリックベースのバージョンです。これは明らかにあなたが望むイベントのいずれかのタイプを使用するように変更することができます。ここでは

<html> 
    <head> 
     <style type="text/css"> 
      #modal-background { 
       display: none; 
       position: fixed; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: 100%; 
       background-color: #000; 
       opacity: .50; 
       -webkit-opacity: .5; 
       -moz-opacity: .5; 
       filter: alpha(opacity=50); 
       z-index: 10; 
      } 

      #modal-background.active { 
       display: block; 
      } 

      .highlight { 
       background-color: #FFF; 
       position: relative; 
       z-index: 100; 
      } 
     </style> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $("*:not(#modal-background)").click(function(){ 
        event.stopPropagation(); 
        $("#modal-background").toggleClass("active"); 
        $("#modal-background").data("highlightedElement", this); 
        $($("#modal-background").data("highlightedElement")).toggleClass("highlight"); 
       }); 

       $("#modal-background").click(function(){ 
        event.stopPropagation(); 
        $("#modal-background").toggleClass("active"); 
        $($("#modal-background").data("highlightedElement")).toggleClass("highlight"); 
       }); 
      }); 
     </script> 
    <body> 
     <h1>Bacon ipsum dolor sit amet</h1> 
     <p>Prosciutto frankfurter qui aliqua do. Laborum elit pork chop, turkey tri-tip in capicola quis officia irure consequat pork sunt jerky tongue.</p> 
     <div id="modal-background"></div> 
    </body> 
</html>

はアクションでそれをjsFiddleである：ここでhttp://jsfiddle.net/Y2tEZ/

出典

2011-12-25 03:08:26

は、私がやったマウスオーバーモーダルの実装です。要素をモーダルにするには、クラスgomodalを追加します。これらの要素がクローズアップされるとマウスオーバーして、ページの残りの部分で透明なオーバーレイが消えます。

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

$('.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(); });

出典

2011-12-25 03:16:23 mrtsherman

これはあなたが望むものでない場合、これは私がhttp://jsfiddle.net/Mouki/6ssXY/

をやっていること、あなたが同じを使用することはできません私に

$(".search").mouseenter(function() { 
    $(this).addClass("focusDiv"); 
    $(".overlay").show("fade", 500); 
}); 

$(".search").mouseleave(function() { 
    $(this).removeClass("focusDiv"); 
    $(".overlay").hide("fade", 500); 
});

出典

2012-11-04 04:15:26 user1797523

要素にフォーカスを設定し、残りの要素をオーバーレイする方法

答えて

関連する問題