同时在SQL中加载Bootstrap模态

debugcn 发表于 Dev

阿德里安

我有以下功能

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的底部，但是在此之外，模式运行良好。但是变量不能再传递了。

有什么办法吗？

希拉里

如果将模态置于循环之外，则可以使用BS模态事件函数将值传递给模态

添加一个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);
    });
});

小提琴的例子

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。