在打开bootstrap模式弹出窗口时阻止加载其他类

时间:2016-12-21 19:31:21

标签: javascript jquery html css asp.net

我有一个按钮,我在其上触发开启引导模式弹出窗口,如下所示:

   <a class="btn btn-app btnWatchlist" data-toggle="modal" data-target="#myModal" style="min-width:175px;margin:0;height:67px">
                                    <i class="fa fa-save"></i> Add to Watchlist
                                </a>

模态弹出式HTML如下所示:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

添加到监视列表按钮在jQuery发布到服务器后加载到DOM中,当服务器返回HTML时,我只需更新用户DOM以显示此按钮。

这里的问题是,在做一个jquery帖子后,我添加了一个类,它基本上在执行搜索时显示一个变速档,现在当我按下按钮时显示模态,但是这个&#34; loading&#34 ;单击也会在单击模态弹出窗口时加载。

使加载类出现的代码是:

 $body = $("body");
    function StartLoading() {
        $(document).on({
            ajaxStart: function () { $body.addClass("loading"); }
        });
    }
    function StopLoading() {
        $(document).on({
            ajaxStop: function () { $body.removeClass("loading"); }
        });
    }

现在,在按下&#34;添加到关注列表的同时,如何防止这两者混合?按钮,所以我只能在加载DOM后显示模态并删除加载类?

P.S。所以最终我不想显示&#34; loading&#34;单击按钮以显示弹出窗口,只显示模态弹出窗口..

1 个答案:

答案 0 :(得分:0)

不确定我是否正确理解了您的问题,但是您可以创建一个变量来跟踪模态的内容是否已经加载,然后将语句interface Blah { middleInitial?: string; age?: number; } class Student { fullName: string; constructor(public firstName: string, public lastName: string, public blah?: Blah) { var middleInitial = blah == undefined ? "" : blah.middleInitial; this.fullName = firstName + " " + middleInitial + " " + lastName; } } 包装在$body.addClass("loading");内?