logo标签列表

如何仅从模态框中移除背景？

javascriptc#jqueryasp.nettwitter-bootstrap
6

我目前正在使用 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("");
    }

有人能帮我吗？我对这个框架没有太多经验，甚至不知道是否以正确的方式进行操作。

附注：此页面是一个ascx文件。

编辑： 我正在处理的项目很旧，而我在开发过程中并没有参与。 但现在我只是给它一点支持和维护。 事实证明，这里存在一个架构问题。原始开发人员尝试通过完全后台回发页面来创建客户端控件结构，并使所有这些控件都在更新面板内部。

由于涉及技术（Ajax等），他们不希望每次用户-客户端勾选或取消勾选任何内容或在另一个选项卡中打开子菜单时都要进行完整的后台回发。因此，他们使其看起来像页面仍然存在，只在更新面板上进行小更新。

背景是为此目的在主控制器上定义的。

唯一的问题是，我的引导程序失去了之前引用的真实对象，因为每当您更改任何内容（包括关闭模态窗口）时，页面都会进行后台回发。因此，当我在模态背景上执行.hide或.remove操作时，引导程序实际上是瞄准它能找到的唯一引用，因此是在主控制器页面上定义的引用。

因此，由于这将需要更多工作并使用比我们处理的时间更多的时间，我们决定让模态窗口没有背景，在模态标记中使用data-backdrop:false。

感谢大家的帮助。

$('.modal-backdrop').hide(); 只是将背景添加了 display: none 样式。可以通过调用 $('.modal-backdrop').show(); 来重新显示它。这对您有帮助吗？ - Steve Danner
很遗憾，已经尝试在点击事件上使用.show()，但是.hide总是会隐藏整个页面的背景。 - Lucas Hipólito
1个回答
8

简单地说，在触发模型的按钮上加上data-backdrop="false"。

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

这里 是完整的参考文档。

"data-backdrop='false'" 不适用。它会禁用模态框的背景。我希望在模态框打开时启用它。但问题是，如何仅针对模态框关闭时删除背景，而不是整个页面？此外，我认为这段代码语法有误，我的浏览器在使用它时出现了错误。 - Lucas Hipólito
请查看我提供的Bootstrap模态框文档页面，并给出一些代码示例。 - Rahul Reghunath
弹出窗口打开时不想要背景吗？ - Karan Singh
我希望在弹出窗口打开时有背景，关闭弹出窗口时没有背景。这是一件不自然的事情（这就是为什么我用$('modal-backdrop').hide()来强制执行），后来改成了.remove()。问题在于，在这种情况下删除（或隐藏）背景时，它会从整个页面中删除/隐藏，而当面板上有一些更新时，我需要它，以便用户在直接与数据库交互时不会检查或取消选中任何内容。 - Lucas Hipólito
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接