0

いくつかのコンテンツを表示するためにファンシーボックスを使用しています。私は自分のページにもっと多くのボタンを置くことができました。しかし、それは機能していません。たとえば、ボタン2と3をクリックすると、ボタン1と同じコンテンツが表示されます。ボタン2と3をクリックすると、適切なコンテンツが表示されるように修正する方法を説明します。

コンテンツボックス

ボタンリンク

HTMLコード：

   <body>
        <!-- button -->
        <div class="button">
            <p><a href="#bubble" id="pop">CONTENT1</a></p>
        </div>

        <!-- popup -->
        <a href="#x" class="overlay" id="bubble"></a>
        <div class="popup">
            <h2>CONTENT1</h2>
                <p>CONTENT.</p>
                <!-- close -->
                <a class="close" href="#close"></a>
        </div>

CSS：コード

header p {padding-top:50px;text-align:center;}
.button a#pop {
    text-align:center;
    position:absolute;
    top:30%;
    left:45%;

    background-color:#444;
    border :0px solid #ddd;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 1px 5px;
    font-size:12px;
    text-decoration: none;
    text-shadow: 1px 1px #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#pop:hover {
    border-color: #eee;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 1;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 10;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup1 {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: #fff;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    right:-10px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(0, 0, 0, 0.8);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: #ddd;
}
.popup1 p {
    margin-bottom: 10px;
}
4

2 に答える 2

0

最初のボタンlink1の <a>タグ領域が他のボタンと重なっていると思います。そのため、ボタン2と3をクリックしても同じコンテンツが表示されます。cssに .button a#popボタンの高さと同様の固定の高さを追加し<a> て、最初のボタンのみをカバーするようにします。

于 2013-01-19T15:44:10.600 に答える
0

コードに次の変更を加え、問題を修正しました。

これは私がしたことです。.button a＃popから
削除しますtop:30%; left:45%;

次に、位置を絶対から相対に変更しますposition:relative;

そして、別のボタンを追加します。 

<div class="button" >
        <p><a href="#bubble2" id="pop">Content2</a></p>
    </div>

    <!-- popup -->
    <a href="#x" class="overlay" id="bubble2"></a>
    <div class="popup">
        <h2>Content2</h2>
            <p>Content</p>
            <!-- close -->
            <a class="close" href="#close"></a>
    </div>

注：href = "＃bubble2"とid="bubble2"が変更されました。

これは正常に機能しています。

于 2013-01-19T19:27:23.827 に答える