【问题标题】:Inputs of form inside modal are not clickable模态框内的表单输入不可点击
【发布时间】:2022-01-09 15:23:49
【问题描述】:

所以我刚刚开始使用引导模式,并且我在不同的页面上有一个注册/登录作为索引。我认为模式可能是一个好主意,我尝试将登录/注册表单导入模式,但知道这是在模式内部,所有输入都不可点击,但如果我按下选项卡,我会进入输入。当然,我忘记了一些东西,但我不知道,因为我将它与模态示例进行比较,我没有发现任何遗漏。

我的模态代码:

<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">
  <div class="modal-dialog p-3 radius bg-secondary" role="document">
    <div class="row d-flex align-items-center justify-content-center m-2">
      <div class="col-11 formBorderBigger bg-success">
        <div class="row d-flex justify-content-center align-items-center">
          <div class="col">
            <div class="row">
              <div class="col">
                <h2 class="text-center text-white p-2">INICIAR SESIÓN</h2>
              </div>
            </div>
          </div>
        </div>
        <div class="row d-flex justify-content-center align-items-center">
          <div class="col-11 formBorderBigger my-2 bg-primary">
            <div class="row d-flex justify-content-center align-items-center">
              <div class="col-11 bg-white my-4 py-3 formBorderSmaller ">
                <form>
                  <div class="row d-flex justify-content-center align-items-center">
                    <div class="col-12">
                      <div class="form-group row">
                        <div class="col-12 justify-content-center align-items-center">
                          <div class="row justify-content-center align-items-center">
                            <div class="col py-2 justify-content-center align-items-center">
                              <div class="input-group mb-2">
                                <div class="input-group-prepend">
                                  <div class="input-group-text"><i class="bi bi-person-fill"></i></div>
                                </div>
                                <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Nombre">
                              </div>
                            </div>
                          </div>
                          <div class="row justify-content-center align-items-center">
                            <div class="col py-2 justify-content-center align-items-center">
                              <div class="input-group mb-2">
                                <div class="input-group-prepend">
                                  <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
                                </div>
                                <input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Contraseña">
                              </div>
                            </div><br>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="row d-flex justify-content-center align-items-center py-2">
                            <div class="col">
                              <h2 class="text-center">Captcha</h2>
                            </div>
                          </div>
                          <div class="row d-flex justify-content-center align-items-center py-2">
                            <div class="col d-flex justify-content-center align-items-center">
                              <div class="captcha bg-black py-2"></div>
                            </div>
                          </div>
                          <div class="row d-flex justify-content-center align-items-center py-2">
                            <div class="col d-flex justify-content-center align-items-center">

                              <div class="input-group mb-2">
                                <div class="input-group-prepend">
                                  <div class="input-group-text"><i class="bi bi-arrow-clockwise"></i></div>
                                </div>
                                <input type="text" class="form-control" id="inlineFormInputGroup">
                              </div>
                            </div>
                          </div>

                        </div>
                        <div class="row d-flex justify-content-center align-items-center py-2">
                          <div class="col-5 d-flex justify-content-center align-items-center">
                            <button class="btn text-white btn-nav rounded-1" type="submit">Entrar</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这对我有什么作用:

Gif of how it works.

【问题讨论】:

    标签: javascript html bootstrap-4 bootstrap-modal bootstrap-5


    【解决方案1】:

    您需要将.modal-content 类添加到模态:

    <!-- Modal Login -->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">
      <div class="modal-dialog p-3 radius bg-secondary" role="document">
        <div class="modal-content">
          <div class="row d-flex align-items-center justify-content-center m-2">
            <div class="col-11 formBorderBigger bg-success">
              <div class="row d-flex justify-content-center align-items-center">
                <div class="col">
                  <div class="row">
                    <div class="col">
                      <h2 class="text-center text-white p-2">INICIAR SESIÓN</h2>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row d-flex justify-content-center align-items-center">
                <div class="col-11 formBorderBigger my-2 bg-primary">
                  <div class="row d-flex justify-content-center align-items-center">
                    <div class="col-11 bg-white my-4 py-3 formBorderSmaller ">
                      <form>
                        <div class="row d-flex justify-content-center align-items-center">
                          <div class="col-12">
                            <div class="form-group row">
                              <div class="col-12 justify-content-center align-items-center">
                                <div class="row justify-content-center align-items-center">
                                  <div class="col py-2 justify-content-center align-items-center">
                                    <div class="input-group mb-2">
                                      <div class="input-group-prepend">
                                        <div class="input-group-text"><i class="bi bi-person-fill"></i></div>
                                      </div>
                                      <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Nombre">
                                    </div>
                                  </div>
                                </div>
                                <div class="row justify-content-center align-items-center">
                                  <div class="col py-2 justify-content-center align-items-center">
                                    <div class="input-group mb-2">
                                      <div class="input-group-prepend">
                                        <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
                                      </div>
                                      <input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Contraseña">
                                    </div>
                                  </div><br>
                                </div>
                              </div>
                              <div class="col-12">
                                <div class="row d-flex justify-content-center align-items-center py-2">
                                  <div class="col">
                                    <h2 class="text-center">Captcha</h2>
                                  </div>
                                </div>
                                <div class="row d-flex justify-content-center align-items-center py-2">
                                  <div class="col d-flex justify-content-center align-items-center">
                                    <div class="captcha bg-black py-2"></div>
                                  </div>
                                </div>
                                <div class="row d-flex justify-content-center align-items-center py-2">
                                  <div class="col d-flex justify-content-center align-items-center">
    
                                    <div class="input-group mb-2">
                                      <div class="input-group-prepend">
                                        <div class="input-group-text"><i class="bi bi-arrow-clockwise"></i></div>
                                      </div>
                                      <input type="text" class="form-control" id="inlineFormInputGroup">
                                    </div>
                                  </div>
                                </div>
    
                              </div>
                              <div class="row d-flex justify-content-center align-items-center py-2">
                                <div class="col-5 d-flex justify-content-center align-items-center">
                                  <button class="btn text-white btn-nav rounded-1" type="submit">Entrar</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Fin Modal Login -->
    

    【讨论】:

    • 谢谢!我尝试添加它,但位置不正确。
    • 太好了,很高兴为您提供帮助
    猜你喜欢
    • 1970-01-01
    • 2020-11-08
    • 2020-06-04
    • 2017-01-11
    • 1970-01-01
    • 2014-12-13
    • 1970-01-01
    • 2020-03-02
    • 2016-07-31
    相关资源
    最近更新 更多