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>

在上面的链接中，您正在调用 #basModal 。因此，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
});

Twitter Bootstrap模态对话框不能正常工作。

2 个答案: