Question

我正在使用bootstrap的模态窗口，但是当我想要查看更多信息时，黑色背景效果不佳

here works good

当我选择“查看详细信息”淡入淡出时，效果不佳

enter image description here

这是我的代码：

<!-- Modal -->
<div class="modal fade  bs-example-modal-lg" id="incidentModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <button id="prev" class="btn btn-primary" ng-click="prevIncident()"><span class="glyphicon glyphicon-chevron-left"><span></button>
        <button id="next" class="btn btn-primary" ng-click="nextIncident()" ><span class="glyphicon glyphicon-chevron-right"><span></button>
        <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">Incident Name: {{incidentSelected.name}}</h4>
    </div>
    <!-- /.modal-header -->
    <!--/.modal-header -->
    <div class="modal-body">
        <div class="container-fluid">
            <div class="modal-body row">
                <div class="col-lg-6">
                    <p class="nocommnts-alert" ng-show="!attachmensresults.length">There are no attachments!</p>
                    <div class="attachmentlist">
                        <ul ng-repeat="image in images | filter:query as attachmensresults">
                            <li>
                                <a href="{{image._links.file.href}}" data-lightbox="example-set" data-title="Click the right half of the image to move forward.">
                                    <div class="img-preview">
                                        <img ng-src="{{image._links.file.href}}" alt="" />
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.attachmentlist -->
                </div>
                <!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <label>Category: </label> {{ incidentSelected._embedded.incident_type}}
                    <br />
                    <label>Description: </label>
                    <div class="Incidentdescrptn">
                        {{ incidentSelected.description }}
                    </div>
                    <br />
                    <label>Employee: </label> {{ incidentSelected._embedded.employee }}
                    <br />
                    <label>Date of Incident: </label> {{incidentSelected.upload_date | date:'EEE'}}{{incidentSelected.upload_date | date:' - dd/MMM/yyyy'}}
                    <br />
                    <label>Hour of Incident: </label> {{incidentSelected.upload_date | date:'hh:mm:ss a'}}
                    <br />
                    <label>Device: </label> {{incidentSelected._embedded.device}}
                    <br />
                    <button type="button" class="btn btn-default" data-toggle="modal" href="#stack2"><span class="glyphicon glyphicon-envelope"></span> Send by Email</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-trash"></span> Archive</button>
                </div>
                <!-- /.col-lg-6 -->
            </div>
            <!-- .modal-body row -->
            <div class="clearfix"></div>
            <div class="commntSection">
                <div class="row">
                    <div class="span4 collapse-group">
                        <p><a class="btn" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a>
                        </p>
                        <p><b>{{commntresults.length}}</b> Comments</p>
                        <div id="viewdetails" class="collapse">
                            <p class="nocommnts-alert" ng-show="!commntresults.length">There are no comments!</p>
                            <div class="col-sm-12">
                                <div id="commnts" ng-repeat="comment in comments | filter:query as commntresults">
                                    <div class="avatar-frame">
                                        <img src="img/grumpy.jpg" alt="" />
                                    </div>
                                    <div class="commnt_cont">
                                        <b>User:</b>
                                        <p>{{comment.message}}</p>
                                    </div>
                                    <!-- ./commnt_cont -->
                                    <br />
                                    <div class="line-separator"></div>
                                    <br />
                                </div>
                                <!-- /#commnts -->
                            </div>
                            <!-- ./col-sm-12 -->

                            <div class="row">
                                <div class="col-sm-12">
                                    <form ng-submit="processForm()">
                                        <div class="form-group">
                                            <textarea ng-keyup="$event.keyCode == 13 ? processForm() : null" required ng-model="formData.comment.message" class='autoExpand' rows='1' data-min-rows='1' id="message" placeholder="Write a comment.... :)"></textarea>
                                        </div>
                                        <!-- /.form-group -->
                                        <button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-heart"></span> Comment</button>
                                    </form>
                                </div>
                                <!-- /.col-sm-12 -->
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /#viewdetails -->
                    </div>
                    <!-- /.collapse-group -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.commntSection -->
        </div>
        <!-- /.container-fluid-->
    </div>
    <!-- /.modal-body-->
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    <!-- /.modal-footer -->
</div>
<!-- /.modal-content-->
</div>
<!-- /.modal-dialog modal-lg-->
</div>
<!-- /.modal fade  bs-example-modal-lg -->

我只使用bootstrap代码进行模态和折叠效果

Answer 1

我看了一下并设置了 Fiddle ，它似乎工作正常。尝试检查您正在使用的css和js文件。

我设置了......

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

您的代码已有详细记录，但在我的编辑器中，它想要添加这些... span / button / div和另一个div。我看不出他们是需要的。

Bootstrap模态窗口不起作用

1 个答案: