Reputation: 381

Can't click anything after i open my Bootstrap modal

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

Upvotes: 19

Answers (3)

Hamza Ansari

Reputation: 1

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.

Upvotes: 0