表單內部模態的輸入不可點擊
[英]Inputs of form insidel modal are not clickable
問題描述
所以我剛剛開始使用引導模式，並且我在不同的頁面上有一個注冊/登錄作為索引。 我認為模態可能是一個好主意，我嘗試將登錄/注冊表單導入模態，但知道這是在模態內部，所有輸入都不可點擊，但如果我按下選項卡，我會在輸入中輸入 go。 當然，我忘記了一些東西，但我不知道，因為我正在將它與模態示例進行比較，並且我沒有看到任何遺漏。
我的模態代碼：
<!-- 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="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>
<!-- Fin Modal Login -->
這對我有什么作用：
1 個解決方案
解決方案1
0 2021-12-03 08:38:25
您需要將.modal-content class 添加到模態：
<!-- 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 -->
根據表單中提供的輸入，在提交表單時在模式框中生成表格
[英]Generate a table in modal box on submitting a form based on the inputs given in form
PHP：如果在輸入中檢測到錯誤，請重新加載Bootstrap模態形式
[英]PHP: Reload Bootstrap modal form if errors are detected in inputs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.