Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • unset
      Modal do Bootstrap 5 não carrega dados dentro dos Editores WYSIWYG
      Por unset
      Olá, estou enfrentando um problema e ainda não consegui pensar em uma solução, como resolver o problema, eu estou mudando meu sistema para utilizar janelas modal do bootstrap 5, cadastro e edição e funciona bem, porém ao adicionar um editor de texto wysiwyg tipo ckeditor 4, tinymce, summernot, e outros nenhum deles abre o conteudo no textarea, não estou conseguindo entender o motivo, se eu retiro a chamada dos editores os dados são exibidos corretamente, se eu deixo os dados não são carregados, mais os editores abrem normal.
       
      alguem já passou por isso, tem alguma luz? obrigado desde já por qualquer ajuda.


    • juniormatrix
      Script para validação
      Por juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • ment0r
      Modal gerado via ajax não funciona função click
      Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • clovis.sardinha
      Como colocar um spinner do bootstrap antes do carregamento da query com o codeigniter.
      Por clovis.sardinha
      Como fazer para colocar um spinner antes de carregar os dados do bd? Eu clico no link e entra na função do controle e só vai para a página da views quando já está pronto a query. Vi uns exemplos de colocação de spinner, mas se a página ainda não apareceu como faço? Vou anexar a função que chama a página para facilitar. 
      public function inativos()  {     $session = \Config\Services::session();     $pager = \Config\Services::pager();     $usuarios=$this->usuarios->getInativos();//faz a query no bd.     $dados=[         'usuarios'=>$usuarios,         'pager'=>$this->usuarios->pager,     ];     echo view('Admin/Relatorios/listaInativos',$dados); }   
    • Alessandro Bodão
      Projeto de Branding
      Por Alessandro Bodão
      Salve galerinha, passando pra mostrar pra vocês o novo projeto de marca que a Jatobá Estúdio desenvolveu, espero que gostem.   https://www.behance.net/gallery/166555627/Fernanda-Pinheiro-Nutricionista-Esportiva
×

Informação importante

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

  Aceito