Twitter Bootstrap模態對話框無法正常工作。

Question

美好的一天，我在DIV上向每個團隊成員展示。 對於每個DIV，都有一個消息按鈕供用戶發送消息。 消息按鈕會啟動一個Bootstrap模式對話框，您可以在其中鍵入消息。 現在，我的問題是我希望將要發送消息的人的姓名顯示在對話框的頂部，但它不起作用。 即使我單擊第三人稱，它也只顯示數據庫中第一人稱的名字。

<?php
require_once "include/db_handle.php";

$sql = "SELECT i.*, m.* FROM addclique i JOIN members m ON m.id = i.clique_id WHERE adder_id = :id";

foreach ($db->query($sql, array('id' => $_SESSION['id'])) AS $result)
{
echo "
    <div class='user_container'>    
     Name: </span> {$result['surname']} {$result['firstname']}</br>
            <a href='test.php' class='' data-toggle='modal' data-target='#basicModal'>Send Message</a>
    </div>

<div class='modal fade' id='basicModal' tabindex='-1' role='dialog' aria-labelledby='basicModal' aria-hidden='true'>
        <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
               <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
               <h4 class='modal-title points' id='myModalLabel'><span style ='color:black;'>To:</span> {$result['firstname']} </h4>
            </div>
            <div class='modal-body'>
                <form action='send.php' method='POST'>
                <textarea name='message' rows='10' cols='65'></textarea></br>

                </form>

            </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
               <button type='button' class='btn btn-primary' data-dismiss='modal'>Send Message</button>
            </div>
        </div>
        </div>
    </div>

    </div>";
}
?>

Answer 1

<a href='test.php' class='' data-toggle='modal' data-target='#**basicModal**'>Send Message</a>

<div class='modal fade' id='**basicModal**' tabindex='-1' role='dialog' aria-labelledby='basicModal' aria-hidden='true'>

如果您真的想為每個用戶做一個模態，請考慮為您的模態做一個變量。

不確定，但是類似的東西。

var $counter = 0;
foreach ($db->query($sql, array('id' => $_SESSION['id'])) AS $result)
{
echo "
    <div class='user_container'>    
     Name: </span> {$result['surname']} {$result['firstname']}</br>
            <a href='test.php' class='' data-toggle='modal' data-target='#basicModal".<?= $counter ?>." '>Send Message</a>
    </div>

        <div class='modal fade' id='basicModal".<?= $counter ?>."' tabindex='-1' role='dialog' aria-labelledby='basicModal' aria-hidden='true'>
        <div class='modal-dialog'>
        <div class='modal-content'>
            <div class='modal-header'>
               <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
               <h4 class='modal-title points' id='myModalLabel'><span style ='color:black;'>To:</span> {$result['firstname']} </h4>
            </div>
            <div class='modal-body'>
                <form action='send.php' method='POST'>
                <textarea name='message' rows='10' cols='65'></textarea></br>

                </form>

            </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' data-dismiss='modal'>Cancel</button>
               <button type='button' class='btn btn-primary' data-dismiss='modal'>Send Message</button>
            </div>
        </div>
        </div>
    </div>

    </div>";
    $counter++;
}
?>

Answer 2

您正在為具有相同ID（即basicModal每個用戶創建模式。 因此，如果總用戶為5，則會在html頁面上創建具有相同ID的5個模態。

<a data-toggle='modal' data-target="#basicModal">Show Modal</a>

並且在上面的鏈接中您正在調用#basicModal，因此js找不到特定的用戶模式ID，因為它不是唯一的，因此它顯示具有該ID的第一個模式（或不顯示任何模式）

如果您在鏈接和模式中使用唯一的id應該可以解決問題，但是更好的選擇是創建一個模式並通過js設置數據，這樣就不會在頁面中放置多個模式html。 jQuery的

<a href='' class='' data-toggle='modal' data-target='#basicModal' id="showModal">Send Message</a>

在jQuery中

$("#showModal").on("click",function(){
//set modal data
});