javascript - 如何仅从模态中删除背景

Question

我目前正在使用 Twitter Bootstrap ，最近我遇到了一个问题，即关闭模式时背景没有关闭。

解决方法:

 $('.modal-backdrop').hide();

此解决方案的问题在于，它从整个页面中删除了背景。当页面加载某些功能时我仍然需要它，这样用户就不会在此过程中选中或取消选中某个字段。

模态代码下方:

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

            <div class="modal-content">
                <div class="modal-header">
                    <asp:HiddenField ID="hfImg" runat="server" />
                </div>
                <div class="modal-body" style="overflow: auto; align-content: center;">
                    <div class="col-sm-12">

                        <div id="views"></div>

                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="col-sm-1 pull-left">
                                <button type="button" class="btn btn-primary" data-dismiss="modal";">Cancelar</button>
                            </div>
                            <div class="col-sm-1 col-sm-offset-8">
                                <button id="cropbutton2" class="btn btn-primary pull-right" type="button" onclick="applyCrop();">Cut</button>
                            </div>
                            <div class="col-sm-1 col-sm-offset-1">
                                <asp:Button runat="server"  CssClass="btn btn-primary pull-right" ID="save" Text="Edit" OnClick="btnEdit_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

保存按钮后面的c#:

     btnEdit_Click(object sender, EventArgs e) 
     {
      ...
      ...
      ...
      ...
      ...
      ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "modal", "closeModal();", true);
      }

CloseModal() 的 javascript:

      function closeModal() {
        $('.modal-backdrop').hide();
        $('body').removeClass('modal-open');
        $('#myModal').modal('hide');
        $('#<%=hfImg.ClientID%>').val("");
    }

谁能帮帮我，我对这个框架没有太多经验，甚至不知道这样做是否正确。

ps:这个页面是一个ascx

编辑:我正在工作的这个项目很旧，我没有在开发它的过程中工作。

但现在我只是给它一点支持和维护。事实证明这里存在架构问题。最初的开发人员试图通过页面始终在客户端控制结构中执行的完整回发来解决问题，使所有这些控件都在更新面板中。

由于所涉及的技术(Ajax 和其他东西)，他们不希望每次用户客户端检查或取消检查某些内容或在另一个选项卡中打开子菜单时都进行完整的回发。所以他们让它看起来像页面仍然存在，只是在更新面板上进行了很少的更新。

背景是为此目的在 Master 上定义的。

只是碰巧我的 Bootstrap 丢失了对它之前引用的真实对象的引用，因为每当您更改任何内容(包括关闭模式)时页面都会收到回发。因此，当我在模态背景上执行 .hide 或 .remove 时，bootstrap 实际上瞄准的是它能找到的唯一引用，因此是母版页上定义的引用。

因此，因为这会比我们处理更多的工作和使用更多的时间，所以我们决定让模式没有背景，在模式标记上使用 data-backdrop: false。

感谢大家的帮助。

Answer 1

很简单，把data-backdrop="false"放在触发模型的按钮上或者

$("#myBtn2").click(function(){
    $("#myModal").modal({backdrop: false});
});

here是完整引用