Как установить фокус на элемент и наложить на остальное - PullRequest
Новая
       7

Как установить фокус на элемент и наложить на остальное

0 голосов
/ 25 декабря 2011

посмотрите по этой ссылке http://robertnyman.com/fat/index.htm библиотека добавит функциональность, чтобы установить фокус на каком-либо элементе, который мы хотим, и наложить остальные элементы. полезно сосредоточиться на каком-то элементе.

есть ли такая же библиотека с ним?

Ответы [ 3 ]

1 голос
/ 04 ноября 2012

это то, что я сделал 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);
});
0 голосов
/ 25 декабря 2011

Вот модальная реализация наведения мыши, которую я сделал. Чтобы сделать элемент модальным, добавьте к нему класс 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(); });
0 голосов
/ 25 декабря 2011

Вот версия на основе кликов, которую вы можете попробовать использовать, если вы хотите очень легкую настройку 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/

...