モーダルボックスで変数を印刷

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

のようになります。しかし、それがecho以内に撮影されたときには、変数$iが印刷されません。 'モーダル'クラスの内部では、 '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>'; 
}