-2

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

それと同じライブラリはありますか？

4

3 に答える 3

2

これは私がやったことです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-04T04:15:26.090 に答える
0

非常に軽量な 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-25T03:08:26.280 に答える
0

これは、私が行ったマウスオーバーモーダルの実装です。要素をモーダルにするには、クラス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-25T03:16:23.400 に答える