Question

我在循环内构建一个带有CSS弹出窗口的网站，其增量为1，但变量$ i不会进行弹出窗口。

CSS

#cover {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
    width: 100%;
    height: 100%;
    display: none;
}
#score {
    height: 380px;
    min-width: 280px;
    max-width: 380px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    display: none;
    background: url(login.png) no-repeat;
    border: 5px solid #cccccc;
    border-radius: 10px;
}
#score:target,
#score:target + #cover {
    display: block;
    opacity: 2;
}
.cancel {
    display: block;
    position: absolute;
    top: 3px;
    right: 2px;
    background: rgb(245, 245, 245);
    color: black;
    height: 30px;
    width: 35px;
    font-size: 30px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}
.popup {
    position: fixed;
    left: 50%;
    top: 20%;
}
.popup .wrapper {
    position: relative;
    left: -50%;
}

PHP

<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li><a href="#score">open popup <?php echo $i;?></a></li>
<div class="popup">
    <div class="wrapper">
        <div id="score" style="background-color:#FFF;">
            popup # <?php echo $i;?> 
            <a href="#" class="cancel">&times;</a>
        </div>
    <div id="cover" >
    </div>
    </div>
</div>

弹出数字$ i永远不会改变。它冻结了1.我不确定问题是什么。我没有看到任何内容，但我无法更改弹出窗口号。

Answer 1

在您的代码中，您重复了具有相同ID的分数div。它需要为不同的div设置不同的ID

（这只会创建正确的html。对于需要使用一些java脚本/ JQuery代码的弹出效果）

试试这个

<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
  <li><a href="#score<?php echo $i;?>">open popup <?php echo $i;?></a></li>
  <div class="popup">
     <div class="wrapper">
        <div id="score<?php echo $i;?>" style="background-color:#FFF;">
            popup # <?php echo $i;?> 
            <a href="#" class="cancel">&times;</a>
        </div>
        <div id="cover" > </div>
    </div>
  </div>   
<?php $i++;}?>

CSS弹出窗口不带PHP变量

1 个答案: