我目前正在使用 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