2

次のコードを使用しています。クリックで別のコンテンツを開きたいです。

<style>
#overlay_form {
    position: absolute;
    border: 5px solid gray;
    padding: 10px;
    background: white;
    width: 270px;
    height: 190px;
}
#pop {
    display: block;
    border: 1px solid gray;
    width: 65px;
    text-align: center;
    padding: 6px;
    border-radius: 5px;
    text-decoration: none;
    margin: 0 auto;
}
</style>

以下のJavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>    
<script type="text/javascript">     
$(document).ready(function () {
    //open popup
    $("#pop").click(function () {
        $("#overlay_form").fadeIn(1000);
        positionPopup();
    });

    //close popup
    $("#close").click(function () {
        $("#overlay_form").fadeOut(500);
    });
});

//position the popup at the center of the page
function positionPopup() {
    if (!$("#overlay_form").is(':visible')) {
        return;
    }
    $("#overlay_form").css({
        left: ($(window).width() - $('#overlay_form').width()) / 2,
        top: ($(window).width() - $('#overlay_form').width()) / 7,
        position: 'absolute'
    });
}

//maintain the popup at center of the page when browser resized
$(window).bind('resize', positionPopup); 
</script>

次のhtmlのようなものを使いたい

<html>
<div>
    <a href="#" id="pop" >Product Overview</a>
    <br/>
        <div id="overlay_form" style="display:none">
            <a href="#" id="close" >Close</a>
        </div>

    <a href="#" id="pop" >User Interface</a>

        <div id="overlay_form" style="display:none">
            <a href="#" id="close" >Close</a>
        </div>
</div>

</html>

さまざまなリンクをクリックすると、ポップアップでさまざまなコンテンツが開きます。

異なる ID を持つ Java スクリプト全体を繰り返さなくても可能です。

ありがとう

4

2 に答える 2

0

まず、同じページで同じ ID を 2 回使用することはできません。現在は を使用#popして#closeおり#overlay_form、両方のリンクで、クラスまたは異なる ID で更新してください。

divコンテンツを保存する各タグ内に追加してa、クリック時にこれを表示/非表示にすることができますか?

于 2013-03-11T13:46:38.193 に答える
0

これを行う方法はいくつかありますが、既存のコードを使用する最も単純な方法では、多くの ID をクラスに切り替える必要があります。このようなもの：

HTML

<html>
    <div>
        <a href="#" class="pop" popup-id="popup1">Product Overview</a>

        <div class="overlay_form" id="popup1" style="display:none">
            <a href="#" class="close" >Close</a><br />
            Popup1 text.
        </div>

        <a href="#" class="pop" popup-id="popup2">User Interface</a>

        <div class="overlay_form" id="popup2" style="display:none">
            <a href="#" class="close" >Close</a><br />
            Popup2 text.
        </div>
    </div>
</html>

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>    
<script type="text/javascript">     
    $(document).ready(function () {
        //open popup
        $(".pop").click(function () {
            var targetPopup = $(this).attr('popup-id');
            $("#" + targetPopup).fadeIn(1000);
            positionPopup(targetPopup );
        });

        //close popup
        $(".close").click(function () {
            $(this).closest(".overlay_form").fadeOut(500);
        });
    });

    //position the popup at the center of the page
    function positionPopup(targetPopup) {
        $("#" + targetPopup).css({
            left: ($(window).width() - $('#overlay_form').width()) / 2,
            top: ($(window).width() - $('#overlay_form').width()) / 7,
            position: 'absolute'
        });
    }

    //maintain the popup at center of the page when browser resized
    $(window).bind('resize', positionPopup); 
</script>

このアプローチでは、各ポップアップの「一意性」をサポートしながら、クラス属性を使用して、同じ動作 (およびスタイル:) を共有するアイテムのより大きなグループを定義できます。

注: これは、宣言を更新して含めるようにしpopup-idない限り検証されないカスタム属性 ( ) を使用します。DOCTYPEただし、特に HTML5 でカスタム属性のサポートが追加されているため、多くの人がこの問題を見過ごしています。

編集：言及するのを忘れました。. . #popここで ID をクラスに変更しているため、CSSと#overlay_formを.popとに更新する必要もあります.overlay_form。

于 2013-03-11T13:57:58.603 に答える