Bootstrap模态不显示只有背景变暗

Question

我正在使用handlebar.js动态创建模态并显示它。 这是我的代码： -

$("#propertyAdArea .property-box").click(function(){
    var advertisement=adData.advertisments[$(this).data("id")];
    $("#myModal").html("");
    callHandlebars("#myModal","single-ad-display-template",[],advertisement);
    $("#myModal").modal('show');
})

myModal只是一个像这样的空div： -

<div id="myModal"></div>

以下是我的嵌入式js脚本： -

  <script src="/resources/app/js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/resources/app/js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="/resources/app/js/classie.js"></script>
    <script src="/resources/app/js/cbpAnimatedHeader.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="/resources/app/js/jqBootstrapValidation.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="/resources/app/js/freelancer.js"></script>

    <!--Handle bars-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script> 

以下是我的嵌入式css文件： -

<link href="/resources/app/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/resources/app/css/freelancer.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/resources/app/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

以下是单广告显示模板： -

  <script id="single-ad-display-template" type="text/x-handlebars-template">
        <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <b>Description</b> : {{description}} <br/>
                                <b>Location</b> : {{location}}<br/>
                                <b>Address</b> : {{address}}<br/>
                                <b>Number Of Rooms</b> : {{numberOfRooms}}<br/>
                                <b>Number Of Bedrooms</b> : {{numberOfBedRooms}}<br/>
                                <b>Number Of Bathrooms</b> : {{numberOfBathRooms}}<br/>
                                <b>Carpet Area</b> : {{carpetArea}}<br/>
                                <b>Security</b> : {{#if security}}<span class="label label-success">Yes</span>{{else}}<span class="label">No</span>{{/if}}<br/>
                                <b>Gated Community :</b> : {{#if gatedCommunity}}<span class="label label-success">Yes</span>{{else}}<span class="label">No</span>{{/if}}<br/>
                                <b>Club House</b> : {{#if clubHouse}}<span class="label label-success">Yes</span>{{else}}<span class="label">No</span>{{/if}}<br/>
                                <b>Gym</b> : {{#if gym}}<span class="label label-success">Yes</span>{{else}}<span class="label">No</span>{{/if}}<br/>
                                <b>Swimming Pool</b> : {{#if swimmingPool}}<span class="label label-success">Yes</span>{{else}}<span class="label">No</span>{{/if}}<br/>
                                <b>Additional Facilities </b>: {{additionalFacilities}}<br/>
                                <b>Type Of Property </b> : {{typeOfProperty}}<br/>
                                <b>Number Of Floors </b> : {{numberOfFloors}}<br/>
                                <b>Floor Number </b> : {{floorNo}}<br/>
                                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

我使用以下主题： -

http://ironsummitmedia.github.io/startbootstrap-freelancer/

这是生成的html： -

<div id="myModal" class="in" aria-hidden="false" style="padding-right: 17px;">
        <div class="portfolio-modal modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <b>Description</b> :  <br>
                                <b>Location</b> : <br>
                                <b>Address</b> : <br>
                                <b>Number Of Rooms</b> : <br>
                                <b>Number Of Bedrooms</b> : <br>
                                <b>Number Of Bathrooms</b> : <br>
                                <b>Carpet Area</b> : <br>
                                <b>Security</b> : <span class="label">No</span><br>
                                <b>Gated Community :</b> : <span class="label">No</span><br>
                                <b>Club House</b> : <span class="label">No</span><br>
                                <b>Gym</b> : <span class="label">No</span><br>
                                <b>Swimming Pool</b> : <span class="label">No</span><br>
                                <b>Additional Facilities </b>: <br>
                                <b>Type Of Property </b> : <br>
                                <b>Number Of Floors </b> : <br>
                                <b>Floor Number </b> : <br>
                                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

有什么问题？