Bootstrap modal background won't disappear

Question

So I have this sign in page using Bootstraps modal. However after the call has finished the modal disappears as it should. Except for the black background. How can I make sure that the background disappears as well?

My _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">&times;</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");
    }

Create a jsfiddle please. Also, "background"? Do you mean the overlay/backdrop? Your server code is irrelevant. — mellis481, Jan 15 '15 at 21:26
@im1dermike: I don't think the server code is irrelevant. Since the problem occours after I've called the server. And the code shows how the form should be updated. What I don't understand is why the faded black background which is behind the white modal doesn't disappear together with the modal. And I'm unable to redo the problem in jsFiddle. Sorry — Michael Tot Korsgaard, Jan 15 '15 at 21:33
When I pop your modal code as it is into Bootply and pop it on page load, then dismiss it, it goes away normally: http://www.bootply.com/DkrP5BPYsA. Unless there's a way to replicate the error, I'm not sure how much help anyone is going to be able to give you. — MattD, Jan 15 '15 at 21:51
@MattD: You are closing the modal with the "close" x in the top corner right? That works for me as well. It's after the ajax call that the problem occours. I thinks the problem occours due to the update that the aja does. What I'm wondering is if there is a way to maybe force the background to disappear if the ajax call was a success — Michael Tot Korsgaard, Jan 15 '15 at 22:13
You should be able to send a success message back to be handled via JavaScript. If it's a success, run `.modal('hide')` on your modal and that should hide it completely. Thing is, without a viable way to test or reproduce the issue, it's very unlikely that anyone here will be able to help you. — MattD, Jan 15 '15 at 22:17

score 22 · Accepted Answer · edited May 23 '17 at 12:02

22

According to this answer the problem is that my Ajax call updates my div and 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.

I ended up using the

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

which on a succesfull ajax call, this removes all the backdrops on the page.

Please go and give Fre a vote up on his answer ^^

edited May 23 '17 at 12:02

Community

1
1

answered Jan 15 '15 at 22:33

Michael Tot Korsgaard

3,892
11
53
89

3

Warning: I found that since the modal backdrop removes the scroll bar when shown, this solution doesn't return the scroll bar to the window. In other words, you won't have a scroll bar until the page refreshes. – FullStack Aug 31 '15 at 06:45
2

While the above answer works, the answers provided here http://stackoverflow.com/a/30373324/2630841 and here http://stackoverflow.com/a/20109519/2630841 are better. – Raj Mar 31 '16 at 09:10
1

This hides the modal but user need to click twice to open the modal after this code .... How to shoot this problem – Veshraj Joshi Mar 06 '17 at 04:14

score 2 · Answer 2 · answered Mar 10 '17 at 18:28

2

You can also use the data-backdrop="false" property on your button.

answered Mar 10 '17 at 18:28

kratos

2,465
2
27
45

score 0 · Answer 3 · answered May 11 '21 at 05:30

0

This works of mine.

$('.close').click();

$(document.body).removeClass("modal-open");

$("modal-backdrop").remove();

https://github.com/valor-software/ngx-bootstrap/issues/853

answered May 11 '21 at 05:30

John Paul Sale

7
1
1

Bootstrap modal background won't disappear

3 Answers3