Bootstrap Modal無法正確顯示

Question

這是此模式的屏幕截圖，顯示但隱藏

Answer 1

您能否檢查下面一行，該行准確地附加在（模態內容內部或外部）。

實際上它應該在您的模態內容之外

<div class="modal-backdrop fade in"></div>

Answer 2

 <div class="row-fluid sortable"> <div class="box span12"> <div class="box-header"> <h2><i class="halflings-icon align-justify"></i><span class="break"></span>Manage All Category</h2> <div class="box-icon"> <a href="#" class="btn-setting"><i class="halflings-icon wrench"></i></a> <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a> <a href="#" class="btn-close"><i class="halflings-icon remove"></i></a> </div> </div> <div class="box-content"> <div id="flash" style="display: none;"> <img style="margin: 15% 0 0 50%; position: absolute;" src="<?php echo base_url(); ?>admin/img/ajaxloader.gif"/> </div> <table class="table table-bordered table-striped table-condensed"> <thead> <tr> <th>Category ID</th> <th>Category Name</th> <th>Status</th> <th>Action</th> </tr> </thead> <tbody> <?php if (isset($links)) { foreach ($all_category as $category) { ?> <tr> <td><?php echo $category->category_id; ?></td> <td class="center"><?php echo $category->category_name; ?></td> <?php if ($category->status == 1) { ?> <td class="center"> <a id="btnpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-important">Unpublish</a> </td> <?php } else { ?> <td class="center"> <a id="btnunpublish" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);" class="label label-success">Publish</a> </td> <?php } ?> <td class="center"> <a class="btn btn-small btn-inverse" href="#" data-toggle="modal" data-target="#myModal<?php echo $category->category_id; ?>">View</a> <a class="btn btn-small btn-info" href="#">Edit</a> <a id="deleteCat" class="btn btn-small btn-danger" data-value="<?php echo $category->category_id; ?>" href="javascript:void(0);">Delete</a> <!--Start View Modal--> <div class="modal fade" id="myModal<?php echo $category->category_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $category->category_id; ?>"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel<?php echo $category->category_id; ?>">Category View</h4> </div> <div class="modal-body"> <p><b>Category ID:</b> <?php echo $category->category_id; ?></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!--End View Modal--> </td> </tr> <?php } } ?> </tbody> </table> <div class="pagination pagination-centered"> <?php echo $links; ?> </div> </div> </div><!--/span--> </div> 

Answer 3

您正在使用哪個版本的Bootstrap？ 在早期版本的Bootstrap中，GH上有一張票。

https://github.com/twbs/bootstrap/issues/16148

Answer 4

每件事都是一件好事...將模態div放在表的td外部，將其保留在主體內，但在表的外側。

模態未顯示，因為您在每個循環中重復使用與模態ID相同的模態（就像按鈕在重復一樣）。

我已經回答了這個問題，您可以在下面的鏈接中實現它。

動態創建的bootstrap3模態不起作用