Ir para conteúdo
Camila97

Modal em JS

Por , em Javascript

Recommended Posts

Camila97    0

Camila97
Postado

Olá, estou tendo dificuldades em um site onde preciso desenvolver um modal ao clicar no botão X para excluir uma despesa, porém, o botão X foi criado no arquivo .js : 

//botão de excluir:
		let btn = document.createElement("button")
		btn.className = 'btn btn-danger'
		btn.innerHTML = '<i class="fas fa-times"></i>'
		btn.id = `id_despesa_${d.id}`

		btn.onclick = function(){

		let id = this.id.replace('id_despesa_', '');		
		
		bd.remover(id)
		window.location.reload()
		
		}
		
		linha.insertCell(4).append(btn)
		console.log(d)

Toda despesa criada, automaticamente é adicionado o botão X ao lado da despesa.

Como poderia fazer aparecer um modal ao clicar nele, para saber se o usuário quer cancelar ou excluir a despesa?

Compartilhar este post

Link para o post
Compartilhar em outros sites

kim.y    11

kim.y
Postado

A grosso modo você pode utilizar o confirm do JS:
Link: https://www.w3schools.com/

Spoiler 

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display a confirm box.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  confirm("Press a button!");
}
</script>

</body>
</html>

 

 

Ou utilizar um modal do bootstrap linkando uma function caso seja clicado no botão "Enviar":

https://www.w3schools.com/

Spoiler 

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
  .modal-header, h4, .close {
    background-color: #5cb85c;
    color:white !important;
    text-align: center;
    font-size: 30px;
  }
  .modal-footer {
    background-color: #f9f9f9;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body" style="padding:40px 50px;">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>
      
    </div>
  </div> 
</div>
 
<script>
$(document).ready(function(){
  $("#myBtn").click(function(){
    $("#myModal").modal();
  });
});
</script>

</body>
</html>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

wanderval    19

wanderval
Postado

Eu geraria essa modal usando o javascript, inicialmente como você não definiu nenhuma tecnologia apenas JS, poderia usar um plugin jQuery, ai no method de evento da modal você continua ou não a request.

 

Eu criei um plugin tenta usar pra ver se te atende, ele tá funcionando pro propósito criado mais pode haver alguma falha, como ele é um plugin jQuery você teria que tb ter essa lib.

 

ex de código: 

$.WModal({
  type: type,
  overlay: false,
  title: 'Delete',
  message: 'Voce tem certeza que deseja deletar',
  cancel: function(e){
    console.log('method:', e);
  },
  confirm: function(e){
    console.log('method:', e);
  }
});

 

link:https://codepen.io/wanderval/pen/vbRxBB

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • tiagosp
      Expressão aritmética JS
      Por tiagosp
      Estou tentando aplicar uma simples expressão com js, porém o resultado não é como esperado:
      var horasP = document.getElementById("horas_p").value; //Valor de entrada: 5 var minP = document.getElementById("min_p").value; // Valor de entrada: 45 horasP *= 60 + minP; console.log(horasP); saída: 30045 Ocorre uma concatenação na saída, ele executa somente a multiplicação.
      Pensei ser um erro na minha expressão, então tentei:
      horasP *= 60; horasP += minP; saída: 30045 Além disso, o operador "/=" simplesmente não funciona...
    • Brxlx
      Como executar animate para somente um determinado item do html?
      Por Brxlx
      Estou tentando inserir essa lógica no scroll da minha página, ele pega corretamente a condição do ife entra no laço. Para todos os demais elementos da página que geram o scroll, ele rola certo, apenas para o button#conheca que não consigo fazer o cálculo da altura. Preciso que ele pegue o offset e some com a altura, devido ao menu que abre em mobile, mas ele está sendo sobrescrito pelo scrollTop anterior.
      Com qual função devo verificar para executar corretamente a lógica?
      if($(window).width() <= 768){ $("html, body, button:not(#conheca)").animate({ scrollTop: (target.offset().top - $(window).height()) }, 1000, "easeInOutExpo"); return false; $("#conheca").on("click", function(){ $('#conheca').animate({ scrollTop: (target.offset().top + $(window).height()) }, 1000, "easeInOutExpo"); return false; }); }else{ $('html, body').animate({ scrollTop: (target.offset().top) }, 1000, "easeInOutExpo"); return false; }
    • Bisnaguitos
      Node requisição e retorno de dados
      Por Bisnaguitos
      Estou tentando pegar dados de algumas ordens de uma API. Primeiro preciso pesquisar todas as ordens com uma requisição e depois de pegar o id dessas ordens fazer outra requisição para outra uri da API para pegar os dados de cada ordem. O problema é que não consigo resgatar os dados de retorno através de um array.
      Segue uma tentativa sem sucesso
      // request de busca const data = await request.get("api.com/search", async(err, data, body)=>{ var arr = [] for(i=0;i<data.length;i++){ const result = await request.get("api.com/order/"+data.id, (e, d, b)=>{ arr.push(d.title) return arr }) } return result; }) console.log(data) Fiz esse código pelo celular só pra exemplificar um dos métodos. Alguém sabe como posso fazer isso funcionar ou se tem uma maneira mais fácil? Obrigado
    • Gabriel_1
      BootStrap alinhamento de colunas.
      Por Gabriel_1
      Tenho duas containers.
      ambas com as mesmas propriedades, e com rows tabém com as mesmas,
      porém elas acabam se desalinhando.
      estou usando o bootstrap.
       
       
      https://www.w3schools.com/code/tryit.asp?filename=FZQ9W97R4SNN
      deixei o html no w3school.
      Obrigado xD

    • M4RC0S J0S3 S1LV4
      Como como fazer 3 input copiar 1
      Por M4RC0S J0S3 S1LV4
      Me desculpe, mas eu estou com um grande problema, acho que é fácil, mas para mim está sendo muito perturbador pois sou iniciante de JavaScript vamos lá.
      Eu queria saber como fazer 1 input preencher 2 input, tipo.. tem 3 input A e todos os input A forem preenchidos e no B a mesma coisa só muda que seja só o Input B. entendem? estou necessitando desta super ajuda.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito