Question

此Bootstrap 3模式框代码在codePen上运行文件，但在我的rails应用程序中出错。

单击缩略图时，在控制台中显示此错误。当代码集成在我的应用程序中时。但在codepen示例中，它可以正常工作。

我的浏览器是Windows上最新版本的Google Chrome。

错误

Uncaught Error: Syntax error, unrecognized expression: 
     <figure class="thumbnail">
      <img src="http://lorempixel.com/600/450/">
      <figcaption class="truncate caption"> blah blah blah blah blah blah </figcaption>
    </figure>

jquery的

$(".thumbnail").click(function(){
    $('.modal-body').empty();
    var title = $(this).parent('a').attr("title");
    $('.modal-title').html(title);
    $($(this).parents('div').html()).appendTo('.modal-body');
    $("#myModal").modal({show:true});
});

HTML

<div class="row borrowers-thumbnails">
  <div class="col-xs-6 col-sm-3 col-md-3">
    <figure class='thumbnail'>
      <img src="http://lorempixel.com/600/450/">
      <figcaption class="truncate caption"> blah blah blah blah blah blah </figcaption>
    </figure>
  </div>
</div>



<div id="myModal" class="modal fade campaign-borrowers" tabindex="-1" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
  <div class="modal-body">
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
   </div>
  </div>
</div>

Answer 1

请在mvc

中试试

 $("body").on("click", "a.dialog-window", null, function (e) {
    e.preventDefault();
    var $link = $(this); // Reference to <a/> link
    var url = $(this).attr('href');

    // this is for future commemnt 
    //$('#myModal .modal-title').html('');
    //$('#myModal').modal('show');
    //$('#myModal .te').html("Loading please wait..");

    $('#divLoading').show();
    if (url.indexOf('#') == 0) {
        $('#myModal').modal('show');}
    else {$.get(url, function (data) {
            $('#myModal .modal-title').html($link.text());
            $('#myModal .te').html(data);
            //  $('#myModal .te').html($.parseHTML(data)); // this remove existing the css
            $('#myModal').modal();
        }).success(function () {
            $('input:text:visible:first').focus();
            $('#divLoading').hide();
        });}
 });
$('#divLoading').hide();

这是jquery

现在plesae把它放在布局页面或任何

的地方

<!-- /spinner -->
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #EAF3FB; z-index: 30001; opacity: .8; filter: alpha(opacity=70);">
    <p style="position: absolute; top: 30%; left: 40%; color: White;">
        <span style="color: #365E94; font-weight: bold;">Loading, please wait...</span><img alt="" src="../../Content/images/loading.gif" />
    </p>
</div>
<!-- /spinner -->

<!-- /.modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"><div class="te">Please wait...</div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                @*<button type="button" class="btn btn-primary">Save changes</button>*@
            </div>
        </div>
    </div>
</div>
<!-- /.modal -->

和应用程序中使用的操作链接只是打开了课程并使用此模型弹出：

     @Html.ActionLink("title of model popup or button name", "Create", "PatientProfile", new { id = item.PatientId }, new { @class = "dialog-window" })

Answer 2

尝试使用img正确关闭您的/>代码：

<img src="http://lorempixel.com/600/450/" />

Answer 3

heyy尝试这个工作......

$(function() {
$(".thumbnail").click(function(){
    $('.modal-body').empty();
    var title = $(this).parent('a').attr("title");
    $('.modal-title').html(title);
    $($(this).parents('div').html()).appendTo('.modal-body');
    $("#myModal").modal({show:true});
});
});

Bootstrap 3模态框 - 未捕获错误：语法错误，无法识别的表达式：

3 个答案: