我正在使用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>
有什么问题？