Modal与bootstrap框架奇怪地显示

Question

在有很多标签的网页上，我有一个输入框，可以通过ajax调用进行搜索。

如果没有结果，我想显示一个模态对话框。

<div role="tabpanel">

<div class="row">
    <div class="span12">
        <nav role="navigation" class="navbar navbar-default navbar-right">

            <form class="navbar-form" role="search">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="inactiveLodger"> Locataire inactif
                    </label>
                </div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Rechercher" name="srch-term" id="srch-term">
                    <div class="input-group-btn">
                        <button id="lodgerSearch" type="button"  class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
                    </div>
                </div>
            </form>

        </nav>


        <div class="modal fade" id="modalEmptyResult">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>Résultat de recherche</h3>
            </div>
            <div class="modal-body">
                <p>Aucun résultat ne correspondant à votre requête</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn">Fermer</a>
            </div>
        </div>

    </div>
</div>
...

 $('#lodgerSearch').on('click', function (e) {

        var inactiveLodger = $('#inactiveLodger').is(':checked');

        debugger;

        var searchParam = $('#srch-term').val();
        var url = "http://localhost:8080/lodgers/search";
        if (searchParam != "") {
            url = url + "?searchTerm=" + searchParam;
        }

        if (inactiveLodger == true) {
            url = url + "?inactiveLodger=true";
        }

        jQuery.ajax({
            type: "GET",
            url: url,
            success: function (data, status, jqXHR) {
                debugger;
                if (data.length == 0) {
                    $("#lodgerSearchResult").empty();
                    $('#modalEmptyResult').modal('show');
                } else {
                    $("#lodgerSearchResult").empty().append(template(data));
                }


            },
            error: function (jqXHR, status) {
                // error handler
                alert("error " + jqXHR + " -  " + status);
            }
        });
        // e.preventDefault();
    });

就像我们在图片上看到的那样，我们可以看到对话框，但它看起来很透明。

我创建了一个类似问题的基本示例。 https://jsfiddle.net/m7eop6k1/

使用jquery 1.9.1进行奇怪的工作......但不能使用最新版本的jquery。