打开引导模式后无法单击任何内容

Posted 2023-02-22

【中文标题】打开引导模式后无法单击任何内容

【英文标题】：Can't click anything after i open my Bootstrap modal

【发布时间】：2016-03-23 13:17:09

【问题描述】：

对于基本问题，我很抱歉，我正在开发 MVC ASP.NET，我正在尝试在我的导航栏中添加一个引导模式，我运行代码，我可以看到我可以触摸它的按钮，但是之后它打开，屏幕不可点击我必须按 f5 再次点击任何地方，这是我第一次使用引导程序中的模态，如果我必须编写一些 javascript 代码，请在谷歌周围搜索，但到处都说你只需要 jquery ，引导程序.js 和 .css 仅此而已。如果我遗漏了什么，请告诉我。谢谢，这是我的代码。

PD：我有一个轮播已经在引导程序中工作了

@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>
            

这是问题的截图

【问题讨论】：

你的意思是，当模态打开时，你不能点击模态屏幕上的任何地方？还是在模式屏幕之外？

任何地方，我尝试触摸模态内部，模态外部，但它就像页面被阻塞，我会大声截图

***.com/questions/10636667/… 我只是在那里找到解决方案

【参考方案1】：

.modal-backdrop 
  z-index: -1;

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

我的回答是针对上面的具体问题（-_-）

您的解决方案就像一个魅力，但理解为什么 Bootstrap 人在 2020 年仍然使用 z-index: 1040; 而这对很多人来说似乎完全是错误的，这将非常有帮助。

【参考方案2】：

试试这个：

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

只是因为模态被聚焦。