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

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

这就是我所做的；从.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 回答
0

我认为您的第一个按钮link1 的 <a>标签区域与其他按钮重叠。这就是为什么您在单击按钮 2 和 3 时获得相同内容的原因。向 .button a#popcss 添加与按钮高度相似的固定高度，以便<a> 仅覆盖第一个按钮。

于 2013-01-19T15:44:10.600 回答