Estou iniciando uns estudos com o TypeScript e estou usando ele em uma aplicação minha que está sendo desenvolvida com o .NET Core Razor.
Eu estou precisando de fazer um código em que abra um modal Bootstrap usando apenas o TypeScript. Sem o jQuery...
Eu não sei como fazer isso, nao achei função que outras pessoas ja fizeram para isso, apenas com o Angular(que eu nao estou usando). Mas agora estou precisando.
Espero que me ajudem nessa. Eu tentei fazer usando "display", mas não consegui.
A questão é o seguinte. Eu preciso fazer um <select> em que se o usuario escolher a opção "Sim", abrirá o modal com algumas opções a serem preenchidas, e ao mesmo tempo terei um botão(caso a opção seja "sim"), para ele clicar e poder mudar oque colocou nas opçoes do modal.
Como eu tentei fazer:
<div class="modal fade d-none" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Fechar</button>
<button type="button" class="btn btn-primary">Salvar mudanças</button>
</div>
</div>
</div>
</div>
<select class="form-control w-100" id="data_test" onchange="modalOpen()">
<option value="NA">Não analizar</option>
<option value="S">Sim</option>
<option value="N">Não</option>
</select>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExemplo">
Abrir modal de demonstração
</button>
function modalOpen() {
if ((<HTMLInputElement>document.getElementById("data_test")).value == "S") {
(<HTMLInputElement>document.getElementById("modalExemplo")).classList.remove("d-none");
} else {
(<HTMLInputElement>document.getElementById("modalExemplo")).classList.add("d-none");
}
}
Já que estou usando o Bootstrap, por que não usar a classe "d-none"? Então tentei fazer desta maneira... mas não funcionou
