Twitter Bootstrap 模态对话框无法正常工作。答案

【问题标题】：Twitter Bootstrap Modal Dialog not working well.Twitter Bootstrap 模态对话框无法正常工作。
【发布时间】：2015-02-10 23:34:54
【问题描述】：

美好的一天，我正在一个 DIV 上展示一个团队的每个成员。对于每个 DIV，都有一个消息按钮供用户发送消息。消息按钮会启动一个引导模式对话框，您可以在其中键入消息。现在，我的问题是我希望将消息发送到的人的姓名出现在对话框的顶部，但它不起作用。即使我点击第三个人，它也只显示数据库中第一个人的名字。

<?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>";
}
?>

【问题讨论】：

你为什么要为每个用户创建一个新的模式？
Bootstrap 在代码中使用 class 和 id，在循环中 foreach ($db->query($sql, array('id' => $_SESSION['id'])) AS $result) { 关注唯一 ID id='basicModal'
@singhakash 这样我就可以获得消息发送到的用户的 ID 和名称。
@BenjaminPoignant 我不明白你
ID 必须是唯一值！更改 id='basicModal' 和 data-target='#basicModal' 以使用唯一 ID；您可以使用自动递增或成员 ID

标签： php html bootstrap-modal

【解决方案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++;
}
?>

【讨论】：

【解决方案2】：

您正在为每个具有相同 id 的用户创建模式，即basicModal。因此，如果总用户为 5，则在 html 页面上创建 5 个具有相同 id 的模态。

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

【讨论】：