Bootstrap Modal not showing properly

Question

Here is my screenshot of this modal, its showing but hiden

Try applying the style here : http://stackoverflow.com/questions/18422223/bootstrap-3-modal-vertical-position-center#answer-25160044 Make sure the style is applied after bootstrap css load. — Zeus, Jan 01 '16 at 14:06
Did you play with the backdrop css? You might have set a higher z-index than the modal's. Try playing with z-index property on the `modal-backdrop` css. — Taha Paksu, Jan 01 '16 at 15:14

score 1 · Answer 1 · answered Jan 01 '16 at 14:06

1

Could you please check the below line.where it append exactly(inside your modal content or outside).

actually it should be in outside of your modal content

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

answered Jan 01 '16 at 14:06

nihar jyoti sarma

541
4
15

onclick how are you showing the modal $("#myModal").modal("show") – nihar jyoti sarma Jan 01 '16 at 14:33
i just use bootstrap modal code and run this... it works properly. but when i used this modal code in a table td it's shows like as top screenshot.. – Md Nazmul Hoq Jan 01 '16 at 14:58
cn u plz check how many times this div added
– nihar jyoti sarma Jan 01 '16 at 15:17

score 0 · Answer 2 · answered Jan 01 '16 at 14:14

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

score 0 · Answer 3 · answered Jan 01 '16 at 14:30

0

Which version of Bootstrap are you using? There was a ticket for that on GH in an earlier version of Bootstrap.

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

answered Jan 01 '16 at 14:30

Patrick

1,562
1
16
33

score 0 · Answer 4 · edited May 23 '17 at 10:28

0

Every thing is good just one thing...put modal div outside to the td of the table, keep it inside body but out side to the table.

Modal is not displaying because you are repeating modal with same id of the modal in for each loop(like buttons are repeating).

I have answered this the way you can achieve it at link below.

dynamically created bootstrap3 modals do not work

edited May 23 '17 at 10:28

Community

1
1

answered Jan 01 '16 at 15:00

Anil Panwar

2,592
1
11
24

I have updated this answer have a look and do it as the answer I have posted in the mentioned link question. – Anil Panwar Jan 01 '16 at 15:11

Bootstrap Modal not showing properly

4 Answers4