twitter-bootstrap Bootstrap 模态背景不会消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27972991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal background won't disappear
提问by Michael Tot Korsgaard
So I have this sign inpage using Bootstraps modal. However after the call has finished the modaldisappears as it should. Except for the black background. How can I make sure that the background disappears as well?
所以我有这个使用s 的登录页面。然而，在通话结束后，它应该会消失。除了黑色背景。我怎样才能确保背景也消失了？Bootstrapmodalmodal
My _Menu.cshtml:
我的_Menu.cshtml：
<div id="menu">
<div class="modal fade" id="form_login" role="dialog" aria-labelledby="form_LoginLabel" aria-hidden="true">
<div class="modal-dialog reset">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
@using (Ajax.BeginForm("SignIn", "Account", new AjaxOptions() { UpdateTargetId = "menu", InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess="CloseModal()" }, new { @class = "form-inline", @role = "form" }))
{
<div class="modal-body">
@if(ViewBag.Message != null)
{
<p class="alert alert-warning">@ViewBag.Message</p>
}
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-control" type="email" id="email" name="email" placeholder="Enter email" value="" required="required" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" placeholder="Enter password" value="" required="required" />
</div>
<span id="message-login-loading" class="alert hidden"></span>
<span id="message-login-error" class="alert alert-danger hidden"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" id="login" ><span class="glyphicon glyphicon-user"></span> Sign in</button>
@Html.ActionLink("Register", "Register", "Account", null, new { @class = "btn btn-primary" })
</div>
}
</div>
</div>
</div>
</div>
AccountController:
帐户控制器：
public ActionResult PartialMenu()
{
var model = ProfileSession.Session;
return PartialView("_Menu", model);
}
public ActionResult SignIn(string email, string password)
{
Login login = loginRep.GetByEmailAndPassword(email, password);
if (login != null)
{
ProfileSession.Session = profileRep.GetById(login.fk_profile);
return RedirectToAction("PartialMenu", "Home");
}
ViewBag.Message("Email or password is incorrect");
return RedirectToAction("PartialMenu");
}
回答by Michael Tot Korsgaard
According to thisanswer the problem is that my Ajaxcall updates my divand therefore the modal ain't visible. The backdrop is however, and its unable to connect to the modal and is therefore unable to disappear like it normally would.
根据这个答案，问题是我的Ajax电话更新了我的div，因此模式不可见。然而，背景是，它无法连接到模态，因此无法像往常一样消失。
I ended up using the
我最终使用了
$('.modal-backdrop').remove();
which on a succesfull ajax call, this removes all the backdrops on the page.
在成功的 ajax 调用中，这将删除页面上的所有背景。
Please go and give Fre a vote up on his answer ^^
请去给 Fre 投票吧他的回答 ^^
回答by kratos
You can also use the data-backdrop="false" property on your button.
您还可以在按钮上使用 data-backdrop="false" 属性。
