CODEWITHSUNDEEP
phphtmlmodal-dialog
Pankkaj
Pankkaj

Reputation: 129

print variable in modal box

I want to print button SUBMIT with the loop count. My code is something like this.

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 code for it goes like this

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

But it doesn't prints the variable $i when it is taken within echo. Inside 'modal' class it sets value of 'i' to 0. And without the CSS code it works fine. Am I going wrong somewhere? If you need more information, please feel free to ask.

Upvotes: 0

Views: 180

Answers (1)

ellirdnaw
ellirdnaw

Reputation: 26

Links call the same modal box (#id02). Change your code like this example below:

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

Upvotes: 1

Related Questions