如何在PHP查詢中打開Twitter Bootstrap模式

Question

我正在嘗試在此查詢中打開模式助推器。 我遇到的問題是，當我單擊“更多信息”打開查詢的所有模式時，我只想打開單擊的內容。 謝謝。

<?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'>&times;</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";
}

?>  

Answer 1

那是因為您要使用bs-example-modal-lg類打開定位模式。 對於所有模態來說都是相同的。

您需要做的是為每個模態賦予唯一的類。 為此，在末尾分配一個帶有計數器的類，這將為其賦予唯一性。

像這樣更新您的代碼，

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'>&times;</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++;
}

在上面的代碼中，我們為每個模態分配了一個customModalClass類，最后使用$cont3計數器使它唯一。

Answer 2

您必須通過獨特的課程，

以下是我的代碼，它將幫助您，

<?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'>&times;</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";
        }
      ?> 

Answer 3

您的數據目標錯誤：

<button type='button' class='btn btn-default' data-toggle='modal'   data-target='.bs-example-modal-lg'>More Info</button>

您所有的模態都具有此類，因此只需執行以下操作：

<div class='modal fade bs-example-modal-lg' id='modal_$film' tabindex='-1' role='dialog' aria-labelledby='myLargeModalLabel'>

擁有ID后，更改按鈕data-target：

data-target='#modal_$film'

希望能有所幫助