요소에 포커스를 설정하고 나머지를 오버레이하는 방법

-2

http://robertnyman.com/fat/index.htm 라이브러리는 원하는 요소에 포커스를두고 나머지 요소를 오버레이하도록 기능을 추가합니다. 그것은 어떤 요소에 집중하는 데 도움이됩니다.요소에 포커스를 설정하고 나머지를 오버레이하는 방법

거기에 동일한 라이브러리가 있습니까?

출처

2011-12-25 Ariona Rian

을주지하시기 바랍니다없는 경우 내가 http://jsfiddle.net/Mouki/6ssXY/

한 일이다. .? –

음,이 라이브러리는 훌륭했지만, 효과는 굉장히 좋지 않습니다. 이런 라이브러리가 있다는 것도 알지만 링크가 무엇인지 잊어 버렸습니다. –

매우 가벼운 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

는이 당신이 원하는, 나에게 자세한 내용은 같은 사용할 수 없습니다

$(".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

요소에 포커스를 설정하고 나머지를 오버레이하는 방법

답변

관련 문제