[英]How to open twitter bootstrap modal in a PHP query
I'm trying to open a modal boostrap in this query. 我正在尝试在此查询中打开模式助推器。 The problem I have is when I click to 'More Info' open all modals of the query, and i want to open only which I clicked. 我遇到的问题是,当我单击“更多信息”打开查询的所有模式时,我只想打开单击的内容。 Thanks. 谢谢。
<?php
$consult= "SELECT * FROM `films`";
$result = $conexion -> query($consult);
if ($result) {
$cont3 = 0; //ID of the film
while ($nfila = $resultado -> fetch_object()) {
$film = "film".$cont3; //To make a unique ID to each film
echo "<form role='form' id='$film'>
<img src='images/".$nfila->image."'><br>
<h4>".$nfila->title." (".$nfila->year.")
<button type='button' class='btn btn-default' data-toggle='modal' data-target='.bs-example-modal-lg'>More Info</button></h4><br>
<div class='modal fade bs-example-modal-lg' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button tyle='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-tigle'>".$nfila->title."</h4>
</div>
<div class='modal-body'>
<img src='images/".$nfila->image."'><br>
<p><strong>Original Title: </strong>".$nfila->tituloOriginal."</p>
<p><strong>Year: </strong>".$nfila->anio."</p>
<p><strong>Country: </strong>".$nfila->pais."</p>
<p><strong>Sinopsis: </strong>".$nfila->sinopsis."</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button>
</div>
</div>
</div>
</div>
";
echo "</form>";
$cont3++;
}
} else {
echo "There was a error to load the films";
}
?>
That's because you're opening targeting modal with bs-example-modal-lg
class. 那是因为您要使用bs-example-modal-lg
类打开定位模式。 And it's same for all the modals. 对于所有模态来说都是相同的。
What you need to do is give unique class to each modal. 您需要做的是为每个模态赋予唯一的类。 To do this assign a class with counter at the end, which will give uniqueness to it. 为此,在末尾分配一个带有计数器的类,这将为其赋予唯一性。
Update your code like this, 像这样更新您的代码,
while ($nfila = $resultado->fetch_object()) {
$film = "film" . $cont3; //To make a unique ID to each film
echo "<form role='form' id='$film'>
<img src='images/" . $nfila->image . "'><br />
<h4>" . $nfila->title . " (" . $nfila->year . ")
<button type='button' class='btn btn-default' data-toggle='modal' data-target='.customModalClass" . $cont3 . "'>More Info</button></h4><br />
<div class='modal fade bs-example-modal-lg .customModalClass" . $cont3 . "' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button tyle='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-tigle'>" . $nfila->title . "</h4>
</div>
<div class='modal-body'>
<img src='images/" . $nfila->image . "'><br />
<p><strong>Original Title: </strong>" . $nfila->tituloOriginal . "</p>
<p><strong>Year: </strong>" . $nfila->anio . "</p>
<p><strong>Country: </strong>" . $nfila->pais . "</p>
<p><strong>Sinopsis: </strong>" . $nfila->sinopsis . "</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button>
</div>
</div>
</div>
</div>";
echo "</form>";
$cont3++;
}
In above code we have assigned a customModalClass
class to each modal with $cont3
counter at the end to make it unique. 在上面的代码中,我们为每个模态分配了一个customModalClass
类,最后使用$cont3
计数器使它唯一。
You have to pass unique class, 您必须通过独特的课程,
Below is my code it will help you, 以下是我的代码,它将帮助您,
<?php
$consult= "SELECT * FROM `films`";
$result = $conexion -> query($consult);
if($result){
$cont3=0; //ID of the film
$i=0;
while($nfila = $resultado -> fetch_object()){
$film="film".$cont3; //To make a unique ID to each film
$i++;
echo "<form role='form' id='$film'>
<img src='images/".$nfila->image."'><br>
<h4>".$nfila->title." (".$nfila->year.")
<button type='button' class='btn btn-default' data-toggle='modal' data-target='.modal". $i."'>More Info</button></h4><br>
<div class='modal fade bs-example-modal-lg modal". $i."' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>
<div class='modal-dialog modal-lg'>
<div class='modal-content'>
<div class='modal-header'>
<button tyle='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-tigle'>".$nfila->title."</h4>
</div>
<div class='modal-body'>
<img src='images/".$nfila->image."'><br>
<p><strong>Original Title: </strong>".$nfila->tituloOriginal."</p>
<p><strong>Year: </strong>".$nfila->anio."</p>
<p><strong>Country: </strong>".$nfila->pais."</p>
<p><strong>Sinopsis: </strong>".$nfila->sinopsis."</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button>
</div>
</div>
</div>
</div>";
echo "</form>";
$cont3++;
}
}
else{
echo "There was a error to load the films";
}
?>
you have a wrong data-target: 您的数据目标错误:
<button type='button' class='btn btn-default' data-toggle='modal' data-target='.bs-example-modal-lg'>More Info</button>
All of your modals have this class, so just do something like: 您所有的模态都具有此类,因此只需执行以下操作:
<div class='modal fade bs-example-modal-lg' id='modal_$film' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>
Once you have an id, change the buttons data-target: 拥有ID后,更改按钮data-target:
data-target='#modal_$film'
Hope that helps 希望能有所帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.