在模态框中打印变量

Question

我想用循环计数打印按钮SUBMIT。我的代码是这样的。

for($i=0; $i<3; $i++) {
//To create modal box for FLAG
echo '<a href="#id02">FLAG</a>
<div id="id02" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <header class="container">
                <a href="#" class="closebtn">x</a>
                <h2>FLAG</h2>
            </header>
            <div class="container">
                <form action="" method="post">
                    <input type="radio" name="for" value="spam">spam</input></br>
                        This is posted to promote some product or service.</br>
                    <input type="radio" name="for" value="rude or abusive">rude or abusive</input></br>
                        Content is rude and is abusive</br>
                    <input type="radio" name="for" value="moderator intervention needed">moderator intervention needed</input></br>
                        content requires human intervention</br>
                    <button class="flag_button" name="q_flag'.$i.'">Submit'.$i.'</button>
                </form>
            </div>
            <footer class="container">
                <p>footer</p>
            </footer>
        </div>
    </div>
</div>';
}

它的CSS代码就像这样

/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
from {
    top:-100px; 
    opacity:0;
    }
to {
    top:0px;
    opacity:1;
}   
}
@keyframes expample {
from {
    top:-100px;
    opacity:0;
}
to {
    top:0px;
    opacity:1;
}
}
.modal {
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4);
}
.modal:target {
display:table;
position:absolute;
}
.modal-dialog {
display:table-cell;
vertical-align:middle;
}
.modal-dialog .modal-content {
margin:auto;
background-color:#f3f3f3;
position:relative;
padding:0;
outline:0;
border:1px #777 solid;
text-align:justify;
width:80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: example;
-webkit-animation-duration: 0.5s;
animation-name:example;
animation-duration:0.5s;
}
.closebtn {
text_decoration:none;
float:right;
font-size:35px;
font-weight:bold;
color:#fff;
}
.closebtn:hover, .closebtn:focus {
color: #000;
text_decoration:none;
cursor:pointer;
}
.container {
padding: 2px 16px;
}
header {
background-color:#5cb85c;
font-size: 25px;
color:white;
}

但是当它在$i内获取时，它不会打印变量echo。在'modal'类中，它将'i'的值设置为0.而没有CSS代码它可以正常工作。 我在某个地方出错了吗？如果您需要更多信息，请随时提出。

Answer 1

链接调用相同的模式框（＃id02）。像下面这个例子一样更改你的代码：

for($i=0; $i<3; $i++) {
  //To create modal box for FLAG
  echo '<a href="#id0'.$i.'">FLAG</a>
    <div id="id0'.$i.'" class="modal">
      <!-- You modal's code -->
    </div>
  </div>';
}