-1

Olá, poderiam me ajudar com esse probleminha, toda vez que carrego a página o modal abre, mas gostaria de abrir apenas se for chamado.

js

//abrir modal
function abrirModalLancamento() {
  document.getElementById("abrirModal").style.visibility = 'block';
}

// função fechar modal lançamento
function fecharModalLancamento() {
  document.getElementById("abrirModal").style.visibility = 'hidden';
}

html

<!--Inicio botão chama-->
<div class="sub-menu-1">
  <ul>
    <li><a href="../Diário de obras/relatorio.html">Relatório</a></li>
    <li><a href="../Diário de obras/colaborador.html">Colaborador</a></li>
    <li><a href="" onclick="abrirModalLancamento()">Obra</a></li>
  </ul>
</div>
<!--fim botão que chama-->


<!--inicio modal-->
<div id="abrirModal" class="modal">
  <div class="modal-dialog">
    <form action="#" method="#">
      <div id="title">
        <h1 id="title-form">Cadastro nova obra</h1>
      </div><br><br>
      <div class="container-form center colaborador">
        <div>
          <label>Contratante</label><br>
          <input class="input_form" type="text" name="name" value="">
        </div>
        <div class="inputbox" type="text" name="email" value="">
          <label>Consolidadora</label><br>
          <select>
            <option value="">Tramo Equipamentos LTDA NE</option>
            <option value="">Tramo LTDA</option>
            <option value="">Tramo Serviços</option>
            <option value="">Tramo Painéis </option>
            <option value="">Tramo Engenharia</option>
          </select>
        </div>
        <div>
          <label>Previsão de começo</label><br>
          <input class="input_form" type="date" name="login" value="" required>
        </div>
        <div>
          <label>Responsável</label><br>
          <input class="input_form" type="password" name="password">
        </div><br>
      </div>
      <div>
        <label>Tarefas a desenvolver</label><br>
        <textarea class="input_form" type="textarea" name="telefone" value=""></textarea>
      </div>
      <div>
        <button class="send-buttons" name="#" value="#"> enviar </button>
        <button onclick="fecharModalLancamento()" class="cancel-buttons" name="#" value="#"> cancelar </button>
      </div>
    </form>
  </div>
</div>
<!--fim modal-->

2
  • Primeira passo, defina no seu css para classe modal ou id abrirModal visibility: hidden;, e no href da obra deixe da seguinte forma href="#", e no seu método abrirModalLancamento altere block para visible, e pronto creio que é o suficiente para funcionar. 17/03/2022 às 17:29
  • 1
    Obrigadão Zé, resolveu de primeira <3
    – Julia
    17/03/2022 às 17:45

2 Respostas 2

0

Você pode manter essas ações nos eventos de click do botão de abertura e de fechamento do modal... Exemplo:

// Instancia o Elemento Modal em uma Variável
var modal = document.getElementById("abrirModal");

// Instancia o Elemento Open em uma Variável
var btn = document.getElementById("ID DO BOTAO (OPEN)");

// Instancia o Elemento em uma Variável
var span = document.getElementsByClassName("CLASSE DO BOTAO (CLOSE)")[0];

// Abre o Modal ao Clicar no Botão
btn.onclick = function() {
  modal.style.display = "block";
}

// Fecha o Modal em Caso de Clique no Botão (Fechar)
span.onclick = function() {
  modal.style.display = "none";
}

// Fecha o Modal em Caso de Cliques fora do mesmo
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
-1

Defina o estilo de sua div para display: none, de preferencia no CSS evitando poluição de estilos no seu HTML, assim quando as funções forem executadas mudarão o estado de display para o desejado.

Por exemplo:

//abrir modal
function abrirModal(id) {
  modal = document.getElementById(id);
  if (modal.style.display === "none") {
    modal.style.display = "block";
  }

}

// função fechar modal
function fecharModal(id) {
  modal = document.getElementById(id);
  if (modal.style.display = "block") {
    modal.style.display = "none";
  }
}
<!--Inicio botão chama-->
<div class="sub-menu-1">
  <ul>
    <li><a href="../Diário de obras/relatorio.html">Relatório</a></li>
    <li><a href="../Diário de obras/colaborador.html">Colaborador</a></li>
    <li><a href="" onclick="event.preventDefault();abrirModal('modal1')">Obra</a></li>
  </ul>
</div>
<!--fim botão que chama-->


<!--inicio modal-->
<div id="modal1" class="modal" style="display: none;">
  <div class="modal-dialog">
    <form action="#" method="#">
      <div id="title">
        <h1 id="title-form">Cadastro nova obra</h1>
      </div><br><br>
      <div class="container-form center colaborador">
        <div>
          <label>Contratante</label><br>
          <input class="input_form" type="text" name="name" value="">
        </div>
        <div class="inputbox" type="text" name="email" value="">
          <label>Consolidadora</label><br>
          <select>
            <option value="">Tramo Equipamentos LTDA NE</option>
            <option value="">Tramo LTDA</option>
            <option value="">Tramo Serviços</option>
            <option value="">Tramo Painéis </option>
            <option value="">Tramo Engenharia</option>
          </select>
        </div>
        <div>
          <label>Previsão de começo</label><br>
          <input class="input_form" type="date" name="login" value="" required>
        </div>
        <div>
          <label>Responsável</label><br>
          <input class="input_form" type="password" name="password">
        </div><br>
      </div>
      <div>
        <label>Tarefas a desenvolver</label><br>
        <textarea class="input_form" type="textarea" name="telefone" value=""></textarea>
      </div>
      <div>
        <button class="send-buttons" name="#" value="#"> enviar </button>
        <button onclick="fecharModal('modal1')" class="cancel-buttons" name="#" value="#"> cancelar </button>
      </div>
    </form>
  </div>
</div>
<!--fim modal-->

Note que fiz uma pequena alteração na sua função pra te dar uma ideia de como reutilizar a mesma em outros modals.

Dica: evite utilizar JS inline, de preferência capture os eventos desejados (click, no caso, no próprio JS).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .