Meu modal abre mas fica com a tela escura e nao consigo interagir com o modal, inserir dados etc, ai tenho que optar por recarregar a pagina para a tela voltar ao normal, como corrijo isso?
Segue o codigo:
<!doctype html>
<div class="dropdown ms-sm-3 header-item topbar-user">
<button type="button" class="btn material-shadow-none" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="d-flex align-items-center">
<img class="rounded-circle header-profile-user" src="assets/images/users/avatar-1.jpg" alt="Header Avatar">
<span class="text-start ms-xl-2">
<span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">CASTILHO</span>
<span class="d-none d-xl-block ms-1 fs-12 user-name-sub-text">Analista Sistema</span>
</span>
</span>
</button>
<div class="dropdown-menu dropdown-menu-end">
<!-- item-->
<a class="dropdown-item" onclick="novoRegistro()"><i class="mdi mdi-account-circle text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Perfil</span></a>
<a class="dropdown-item" href="apps-chat.html"><i class="mdi mdi-message-text-outline text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Mensagens</span></a>
<a class="dropdown-item" href="auth-lockscreen-basic.html"><i class="mdi mdi-lock text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Tela de bloqueio</span></a>
<a class="dropdown-item" href="./logout"><i class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i> <span class="align-middle" data-key="t-logout">Logout</span></a>
</div>
</div>
<div class="modal fade" id="showModal" data-bs-backdrop="static" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="border-primary">
<div class="modal-header card-header text-info p-3 text-white" style="background-color: #43517a;"><img src="assets/images/sp-obras2.png" style="opacity: 0.9;" alt="" height="52"> FORMULÁRIO DE CATEGORIAS
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
</div>
<style type="text/css">
.form-label-status {
padding-left: 10px; /* Ajuste o valor conforme necessário */
padding-right: 10px; /* Ajuste o valor conforme necessário */
}
</style>
<form class="form_categoria" action="javascript:void(0);" autocomplete="off">
<div class="modal-body">
<div class="align-items-center d-flex">
<div class="col-md-10 row">
<input type="hidden" id="id-field" />
<div class="col-md-2 mb-3" id="modal-id">
<label for="orderId" class="form-label">ID</label>
<input type="text" id="id" class="form-control" style="text-align: center;" placeholder="0000" readonly />
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<label for="text-field" class="form-label">Senha</label>
<input type="password" class="form-control" id="senha" oninput="handleInputUpper(event)" maxlength="50" value="" oninput="handleInputUpper(event)" onkeydown="checkEnter(event, 'anotacao');" onFocus="this.style.backgroundColor='#FAFAD2'" onblur="this.style.backgroundColor=''"/>
</div>
<div class="col-md-12 mb-3">
<label for="text-field" class="form-label">Usuario</label>
<input type="text" class="form-control" id="usuario" oninput="handleInputUpper(event)" maxlength="50" value="" oninput="handleInputUpper(event)" onkeydown="checkEnter(event, 'anotacao');" onFocus="this.style.backgroundColor='#FAFAD2'" onblur="this.style.backgroundColor=''"/>
</div>
<div class="modal-footer">
<div class="hstack gap-2 justify-content-end">
<button type="button" id="btnSalvar" class="btn btn-success" onclick="Salvar()">Salvar</button>
<button type="button" id="btnFechar" class="btn btn-light" data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
function novoRegistro() {
const showModal = new bootstrap.Modal(document.getElementById(‘showModal’), {
backdrop: true, // Controla se o backdrop será exibido
keyboard: true // Permite fechar com a tecla ESC
});
showModal.show();
}
Ja tentei de varias formas, mas nada adianta
New contributor
Lucas Sette is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.