Question

我正在使用一个精美的盒子来显示一些内容。我设法在我的页面上添加了更多按钮。但它没有用。当我点击按钮2和3时，我会得到与按钮1中相同的内容。如何解决这个问题，以便当我点击按钮2和3时，我得到了正确的内容。

HTML CODE：

   <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：CODE

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;
}

Answer 1

我认为您的第一个按钮 link1的 <a>标记区域与其他按钮重叠。这就是为什么你点击按钮2＆amp; 3.将.button a#pop css添加到与按钮高度类似的固定高度，以便<a>仅覆盖第一个按钮。

Answer 2

我对您的代码进行了以下更改，并设法解决您的问题。

这就是我所做的;
从。按钮＃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”已更改。

这很好。

当我点击每个按钮时，它会向我显示第一个按钮的相同内容

2 个答案: