Can't click anything after i open my Bootstrap modal

Question

sorry for the basic question, I'm working on MVC ASP.NET and I'm trying to add a bootstrap modal in my navbar, I run the code, i can see the button i can touch on it, but after it open, the screen is unclickable i have to f5 to click anywhere again, it's the first time i use modals from bootstrap, and search all around google if I have to write some JavaScript code, but everywhere says that you just need jquery , bootstrap.js and .css and nothing else. If I'm missing something just let me know. Thanks, Here is my code.

PD: I have a carousel already working from bootstrap

@if (Session["usuario"] == null)
            {
                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    Ingresar
                </button>

                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Iniciar Sesión</h4>
                            </div>
                            <div class="modal-body">
                                <form method="post" action="@Url.Action("DoLogin","Usuario")">
                                        <span class="alert-danger">@ViewBag.NoUser</span>
                                        <label for="NombreDeUsuario" class="sr-only">Nombre de Usuario</label>
                                        <input type="text" id="NombreDeUsuario" name="NombreDeUsuario" class="form-control" placeholder="Ingresa tu Usuario" required="" autofocus="" />
                                        <br />

                                        <label for="Contrasena" class="sr-only">Contraseña</label>
                                        <input type="password" id="Contrasena" name="Contrasena" class="form-control" placeholder="Ingresa tu Contraseña" required="" />
                                        <br />
                                        <button class="btn btn-lg btn-primary btn-block" type="submit">Ingresar</button>
                                 </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            }

Here is a screenshot of the problem

you mean, when modal open, you can not click anywhere on modal screen? or outside modal screen? — Ubiquitous Developers, Dec 17 '15 at 06:56
anywhere, i try to touch inside the modal, outside the modal but its like the page get blocked, i will aploud a screenshot — Franco Papalardo, Dec 17 '15 at 13:45
http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background i just find the solution right there — Franco Papalardo, Dec 17 '15 at 14:35

score 37 · Answer 1 · answered Oct 26 '16 at 09:43

37

.modal-backdrop {
  z-index: -1;
}

answered Oct 26 '16 at 09:43

Daniel

403
5
13

19

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – andreas Oct 31 '16 at 09:26
2

my answer is for the specific question above (-_-) – Daniel Nov 01 '16 at 17:58
1

Your solution works like a charm but it would be really helpful to understand why the Bootstrap guys still use `z-index: 1040;` in 2020 while it's seems to be simply wrong for quite a bunch of people. – Andreas Aug 27 '20 at 14:09

score 2 · Answer 2 · answered Jun 25 '20 at 22:58

2

Try this:

$(document).off('focusin.modal');

Its just because the modal is focused.

answered Jun 25 '20 at 22:58

Awad Nisar

21
3

score 0 · Answer 3 · answered Oct 01 '22 at 05:55

How it got fixed in my case.

The problem was after copying the modal and making some changes I had put all the contents inside the dialog part and removed the modal content and body. So to enable clicks on elements add your main contents to the modal content part or preferably in the body section. This will fix it.

Can't click anything after i open my Bootstrap modal

3 Answers3

Linked