javascript - 在 SQL 中加载 Bootstrap 模式

Question

我有以下功能

function articlesList($limit) { ?>
 <div class="table-responsive rounded mb-20">
 <table class="table table-striped table-theme">
    <thead>
         <tr>
             <th style="width: 5%;" class="text-center border-right">ID</th>
             <th style="width: 10%;" class="text-center">Image</th>
             <th style="width: 50%;">Name</th>
             <th style="width: 20%;">Date</th>
             <th style="width: 15%;" class="text-center">Actions</th>
         </tr>
    </thead>
    <tbody>
 <?php $sql = "SELECT * FROM articles ORDER BY ID DESC";
 $items = mysql_query($sql);
 while ($art = mysql_fetch_array($items)) { 
 $id = "$art[ID]"; ?>
    <tr>
        <td class="text-center border-right"><?=$art[ID]?></td>
        <td class="text-center"><img src="../media/articles/<?=$art[image]?>" class="img-bordered-theme" width="45" height="45"></td>
        <td><?=$art[name]?></td>
        <td><?=$art[date]?></td>
        <td class="text-center">
        <a href="?act=edit&amp;id=<?=$art[ID]?>" class="btn btn-success btn-sm rounded" data-toggle="tooltip" data-placement="top" data-original-title="Edit"><i class="fa fa-pencil"></i></a>
        <a href="#" class="btn btn-danger btn-sm rounded" data-toggle="modal" data-target=".remove_<?=$art[ID]?>" data-placement="top" data-original-title="Remove"><i class="fa fa-times"></i></a>
        </td>
    </tr>
     <!-- Start MODAL EVENTS -->
     <div class="remove_<?=$art[ID]?> modal fade" tabindex="-1" role="dialog" aria-hidden="true">
         <div class="modal-dialog modal-md" style="margin-top: 200px;">
             <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">Remove article</h4>
                </div>
                <div class="modal-body"><p>Are you sure you want to remove the article <b><?=$art[name]?></b>?</p></div>
                 <div class="modal-footer">
                     <form name="input" action="?act=remove" method="post">
                         <input type="hidden" name="id" value="<?=$art[ID]?>">
                         <input type="hidden" name="name" value="<?=$art[name]?>">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                         <button type="submit" class="btn btn-danger">Remove</button>
                     </form>
                 </div>
             </div>
         </div>
     </div>
     <!-- End MODAL EVENTS -->
 <?php } ?>
 </tbody>
 </table>
 </div>
 <?php } //function 

我的问题是模态框。加载工作正常，所有变量都已传递，但打开模式时发生了一些事情。

类似这样的:

按钮无法按下，我无法关闭盒子或执行任何其他操作。

经过一些测试，如果我将模态代码放在 while 的底部但在此之外，模态效果很好。但变量不能再传递了。

有什么解决办法吗？

Answer 1

如果将模态放在循环之外，则可以使用 BS modal event function 将值传递给模态

添加data-attribute模态触发按钮，例如 data-id="<?=$art[ID]?>"并删除 <?=$art[ID]?>来自data-target

<a href="#" class="btn btn-danger btn-sm rounded" data-id="<?=$art[ID]?>" data-toggle="modal" data-target=".remove" data-placement="top" data-original-title="Remove"><i class="fa fa-times"></i></a>

您必须传递给模态的第二个变量是 <?=$art[name]?> ，添加另一个 data-attribute也可以，例如 data-value="<?=$art[ID]?>"

<td><span class="name" data-value="<?=$art[ID]?>"><?=$art[name]?></span></td>

注意:您可以添加 data-value="<?=$art[ID]?>"到任何页面上的元素并将其传递给模式。

现在模态 HTML(循环外)将是 注意:我添加了<span class="Mname"></span>在模态中显示名称，并添加 id's输入传递值

<!-- Start MODAL EVENTS -->
<div class="remove modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md" style="margin-top: 200px;">
        <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">Remove article</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to remove the article <b><span class="pname"></span></b> ?</p>
            </div>
            <div class="modal-footer">
                <form name="input" action="?act=remove" method="post">
                    <input type="hidden" name="id" id="pid" value="">
                    <input type="hidden" name="name" id="pname" value="">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Remove</button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End MODAL EVENTS -->

BS Modal 事件监听器脚本将是

$(document).ready(function(){ //Dom Ready
    $('.remove').on('show.bs.modal', function (e) { //Show event listener
        //Fetch val from modal button data-attribute
        var id = $(e.relatedTarget).data('id');
        //fetch name which match the data-attribute val of modal button
        var name = $('.name[data-value="' + id +'"]').html();
        //you can pass any on page variable or information to modal like this by creating more variables like `var name`
        //Now Pass it to modal
        $(".pname").html(name); 
        $("#pid").val(id);
        $("#pname").val(name);
    });
});

Fiddle Example