Jump to content
Camila97

Modal em JS

By Camila97, in Javascript

Recommended Posts

Camila97    0

Camila97
Posted

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

kim.y    11

kim.y
Posted

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

wanderval    19

wanderval
Posted

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
Go To Topic Listing Javascript

  • Similar Content

    • MateusOFCZ
      Executar comando node.js em um JFrame java (NETBEANS)
      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?
    • Mewmew
      Posição de Contêiners no Bootstraps
      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! 
       



    • marcelodevico
      Data-filter
      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. 
    • NINO2391
      Aperta Uma algum Botão Do Teclado E Js Faz Uma Açao
      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.

  I accept