Javascript 模态显示奇怪的引导框架

在一个有很多选项卡的网页上，我有一个通过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>
...

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

我创建了一个具有类似问题的基本示例。

---

jQuery1.9.1运行起来很奇怪。。。但jquery的最新版本不适用。

您需要先实例化模式，然后才能在其上调用

open

，更正模式内部的html（缺少div）。检查@idan，如果您检查了bootstrap提供的一些示例，它似乎没有更多的工作要做。@roberttrudel当您有一个类似于它们的示例（触发按钮）的案例时，您不需要太多，只需要一些注释（示例代码中缺少），但是您的案例不同，因为您希望以编程方式显示模式，所以你必须先实例化它。当我靠近一台电脑时，我将展示一个例子：jQuery由于某种原因无法工作。。。不太清楚，因为我在手机上

 $('#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();
    });