Bootstrap Modal无法正常显示

时间:2016-01-01 13:59:35

标签: javascript jquery twitter-bootstrap

这是我对这个模态的截图,它显示但是隐藏了

enter image description here

4 个答案:

答案 0 :(得分:1)

请你检查下面的行。它准确附加的地方(在你的模态内容或外面)。

实际上它应该在你的模态内容之外

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

答案 1 :(得分:0)

<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>

答案 2 :(得分:0)

您使用的是哪个版本的Bootstrap? 早期版本的Bootstrap中有一张关于GH的票据。

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

答案 3 :(得分:0)

每件事情都是好事只有一件事......将模态div放在桌子的外面,把它放在身体内但不在桌子旁边。

模态不显示,因为您正在为每个循环重复具有相同模式的模态(如按钮重复)。

我已经通过以下链接实现了这一点。

dynamically created bootstrap3 modals do not work