Jump to content

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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>

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By MateusOFCZ
      Olá, gostaria de saber, como posso fazer para quando clicar em um botão, por exemplo, em um formulário JFrame (Java) ele executar um comando node.js, fiz o código javascript no Visual Studio Code, e quero fazer um executável para executar o script e fazer a leitura dos dados... Alguém pode me ajudar?
    • By Mewmew
      Bom dia!
       Teria como alguém me ajudar? 
      Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo...
       
       Preciso criar um contêiner dentro de outro contêiner igual a imagem 1.
       
      Só que ele está ficando igual a imagem 2.
       
       Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. 
      Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente! 
       



    • By marcelodevico
      Olá,
       
      preciso que o site já abra com o filtro "geradores" ativo, e não mostrando todo os conteúdos de todos os filtros. 

                      <div class="portfolio_filter portfolio_filter_2">
                          <ul>
                              <li data-filter=".geradores" class="active"><a href=""><i class="fa fa-plug" aria-hidden="true"></i>GERADORES</a></li>
                              <li data-filter=".solar"><a href=""><i class="fa fa-sun-o" aria-hidden="true"></i>ENERGIA SOLAR</a></li>
                              <li data-filter=".obras"><a href=""><i class="fa fa-cubes" aria-hidden="true"></i>OBRAS CIVIS</a></li>
                              <li data-filter=".eletricos"><a href=""><i class="fa fa-wrench" aria-hidden="true"></i>SRVIÇOS ELÉTRICOS</a></li>
                              <li data-filter=".transformadores"><a href=""><i class="fa fa-bolt" aria-hidden="true"></i>TRANSFORMADORES</a></li>
                          </ul>
                      </div>
       
      o <class="active"> só está servindo para deixar ele marcado, como se estivesse ativo, mas o filtro não está abrindo ativo quando se inicializa o site. Apenas após clicar nele. 
    • By NINO2391
      Bom Glr, Tô Fazendo Um Web Site E Quero Fazer Umas Funções Escondidas Nela!
       
      bom meu objetivo era tipo apertas as tecla do teclado CTRL+A e abrir uma janela flutuante
      <form action=""> <input type="file" name="tag"><br> <input type="submit" value="Submit"> </form> Então vou falar resumidamente: ENTRAVA NO SITE, APERTAVA CTRL+A E APARECIA ESSA JANELA FLUTUANTE!!
       
      Quem Puder Ajudar....Ficaria Mil Agradecido!!!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.