Pesquisar na Comunidade
Mostrando resultados para as tags ''modal''.
Encontrado 13 registros
-
Modal do Bootstrap 5 não carrega dados dentro dos Editores WYSIWYG
unset postou um tópico no fórum Desenvolvimento frontend
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.- 1 resposta
-
- modal
- bootstrap5
-
(e mais 2 )
Tags:
-
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á.
-
Ajuda em web programação [Formas de Pagamento pop up modal]!!!
babylon postou um tópico no fórum PHP
Ola amigos, Estava querendo criar algo para meu site, um botao igual do site abaixo para calcular formas de pagamento "ver formas de pagamento": https://www.chipart.com.br/pc-gamer-level-one-black-amd-3400g Segue imagem em anexo. Alguem poderia me ajudar se tem algum script algo pronto ou que ajude para abrir pop up modal? Obrigado a todos. -
Fala galera! Estou com a seguinte situação e queria uma ajuda de pôr onde seguir o meu raciocínio para resolver: Possuo um array X com dados que vem do meu backend, exemplo: array = [ 0: [1, 'Banana', '3.00', '...'], 1: [2, 'Maça', '4.00', '...'], 2: [3, 'Abacaxi', '5.00', '...'] ]; Monto para o usuário uma tela com a tabela desses dados, com informações resumidas e um botão "detalhar" para exibir o conteúdo em um modal: | ID | Fruta | Preço| Ação | | 1 | Banana | 3.00 | Detalhar | | 2 | Maça | 4.00 | Detalhar | | 3 | Abacaxi| 5.00 | Detalhar | Até aí tudo certo, funciona redondo. Mas preciso fazer com que ao abrir o modal, independente do registro que cliquei (ID 1, 2 ou 3), eu possa "navegar" entre os outros registros no modal (possuo botões para isso) sem precisar sair do modal, como se fosse uma paginação. Como poderia construir essa lógica?
- 3 respostas
-
- vuejs
- javascript
-
(e mais 2 )
Tags:
-
Estou precisando colocar em um site um propriedade que toda vez que clicar em uma imagem apareça uma janela modal com um slide show em que você pode passar as imagens. Por exemplo se tiver a foto de um celular quando eu clicar nela aparecera um slide show, onde você pode ir passando e vendo outras imagens do celular. Eu já tentei fazer mais sempre dá erro quando eu coloco várias imagens e tento chamar uma por uma. Não sei se eu preciso chamar cada slide ou se existe uma forma simples de se fazer isso. Vou postar aqui um código que eu fiz: CSS: * { box-sizing:border-box; font-family: Arial; } .slideshow-container { max-width: 800px; position: relative; margin: auto; } .mySlides { display: none; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #4285f4; font-weight: bold; font-size: 28px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } .dot { cursor: pointer; height: 15px; width: 15px; margin: 10px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #4285f4; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } .img_slide{ width: 100%; height: 500px; } /* ----------------MODAL--------------------------------- */ .modal-container{ width: 100vw; height: 100vh; background: rgba(0, 0, 0, .8); position: fixed; top: 0px; left: 0px; z-index: 2000; display: none; justify-content: center; align-items: center; font-family: Arial, Helvetica, sans-serif; } .modal-container.mostrar{ display: flex; } @keyframes modal{ from{ opacity: 0; transform: translate3d(0, -60px, 0); } to{ opacity: 1; transform: translate3d(0, 0, 0); } } .mostrar .modal-content{ animation: modal .3s; } .fechar{ position: absolute; top: 8px; right: 3px; width: 30px; height: 30px; font-weight: bold; color: #4285f4; font-size: 25px; font-family: Arial, Helvetica, sans-serif; cursor: pointer; background: transparent; border: none; } @media (max-width: 600px) { .img_slide{ width: 100%; height: 300px; } } JAVASCRIPT: var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } function iniciaModal(modalID){ const modal = document.getElementById(modalID); if(modal){ modal.classList.add('mostrar'); modal.addEventListener('click',(e)=>{ if(e.target.id == modalID || e.target.className == 'fechar'){ modal.classList.remove('mostrar'); } }); } } const botaoChama = document.querySelector('#botaoChama'); botaoChama.addEventListener('click',()=>{ iniciaModal('modal'); }); const botaoChama2 = document.querySelector('#botaoChama2'); botaoChama2.addEventListener('click',()=>{ iniciaModal('modal2'); }); HTML: <div id="modal" class="modal-container"> <button class="fechar">X</button> <div class="slideshow-container"> <div class="mySlides fade"> <img src = "https://wallpapercave.com/wp/wp3473585.jpg" class="img_slide"> </div> <div class="mySlides fade"> <img src = "https://i.pinimg.com/originals/cd/7b/5c/cd7b5c8d4687b5c98a445127926a56e2.jpg" class="img_slide"> </div> <div class="mySlides fade"> <img src =" https://wallpapercave.com/wp/wp2043649.png " class="img_slide"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </div> </div> <div id="modal2" class="modal-container"> <button class="fechar">X</button> <div class="slideshow-container"> <div class="mySlides fade"> <img src="https://wallpapercave.com/wp/wp9688141.jpg" class="img_slide"> </div> <div class="mySlides fade"> <img src="https://wallpapercave.com/wp/wp8480719.jpg" class="img_slide"> </div> <div class="mySlides fade"> <img src="https://wallpapercave.com/wp/wp9683280.jpg" class="img_slide"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div style="text-align:center"> <span class="dot" onclick="currentSlide(4)"></span> <span class="dot" onclick="currentSlide(5)"></span> <span class="dot" onclick="currentSlide(6)"></span> </div> </div> </div> <button id="botaoChama">Modal</button> <button id="botaoChama2">Modal 2</button>
- 2 respostas
-
- modal
- javascript
-
(e mais 1 )
Tags:
-
Gostaria de chamar a janela modal de acordo com o produto escolhido para ser excluído, eu ainda estou fazendo o front do projeto mas sei que é possível fazer isso só com javascript seria algo como chamar a janela modal de acordo com o id do produto que será trazido pelo banco de dados CSS: .modal-container{ width: 100vw; height: 100vh; background: rgba(0, 0, 0, .5); position: fixed; top: 0px; left: 0px; z-index: 2000; display: none; justify-content: center; align-items: center; font-family: Arial, Helvetica, sans-serif; } .modal-container.mostrar{ display: flex; } .modal-content{ background: #fff; width: 30%; min-width: 300px; padding: 30px; border: 10px solid #988b7a; box-shadow: 0 0 0 10px #fff; position: relative; } .btn-question{ color: #fff; border-radius: 8px; border: none; width: 120px; height: 60px; font-size: 18px; cursor: pointer; margin-left: 10%; transition: .8s; } .btn-yes{ background-color: #4caf50; } .btn-yes:hover{ background-color: #50dd55; } .btn-no{ background-color:#db4437; } .btn-no:hover{ background-color: #f53625; } @keyframes modal{ from{ opacity: 0; transform: translate3d(0, -60px, 0); } to{ opacity: 1; transform: translate3d(0, 0, 0); } } .mostrar .modal-content{ animation: modal .3s; } .fechar{ position: absolute; top: 0px; right: 0px; width: 30px; height: 30px; border-radius: 50%; border: 4px solid #fff; background: red; color: #fff; font-family: Arial, Helvetica, sans-serif; cursor: pointer; } HTML: <table class="tabela-padrao" border="1px"> <thead> <tr> <th>Produto</th> <th>Marca</th> <th>Quant</th> <th>Preço</th> <th>Excluir</th> </tr> </thead> <tbody> <tr> <td>Mouse</td> <td>Multilaser</td> <td>2</td> <td>50,00</td> <td><button id="botaoChama">Excluir Produto</button></td> </tr> <tr> <td>Teclado</td> <td>Multilaser</td> <td>2</td> <td>50,00</td> <td><button id="botaoChama">Excluir Produto</button></td> </tr> <tr> <td>Fone</td> <td>Multilaser</td> <td>2</td> <td>50,00</td> <td><button id="botaoChama">Excluir Produto</button></td> </tr> </tbody> </table> <div id="modal" class="modal-container"> <div class="modal-content"> <button class="fechar">X</button> <h2 class="subtitulo">Tem certeza que deseja excluir esse produto?</h2> <button class="btn-question btn-yes">Sim</button> <button class="btn-question btn- no">Não</button> </div> </div> JS: function iniciaModal(modalID){ const modal = document.getElementById(modalID); if(modal){ modal.classList.add('mostrar'); modal.addEventListener('click',(e)=>{ if(e.target.id == modalID || e.target.className == 'fechar' || e.target.className == 'btn-question btn-no'){ modal.classList.remove('mostrar'); } }); } } const botaoChama = document.querySelector('#botaoChama'); botaoChama.addEventListener('click',()=>{ iniciaModal("modal"); });
- 4 respostas
-
- javascript
- modal
-
(e mais 1 )
Tags:
-
iai galera fiz o seguinte script pra fazer uma busca em uma tabela Mysql via php, quando o usuario digita algo em um formulario ele é disparado e faz as devidas buscas na tabela $('#buscarAlunoOnline').keyup(function(){ var buscarAlunoOnline = $('#buscarAlunoOnline').val(); if(buscarAlunoOnline === ""){ var qdade_result_pagina = 50; //Quantidade de Registros por pagina var pagina = 1; //pagina inicial var idLocalidade = <?php echo $unidadeTrabalho?>;//localidade de trabalho do funcionario logado var tipoLogin = <?php echo $tipoLogin?>;//tipo de funcionario logado $(document).ready(function (){ listar_alunos(pagina, qdade_result_pagina, idLocalidade, tipoLogin);//Chama funcao para mostrar resultados }); function listar_alunos(pagina, qdade_result_pagina, idLocalidade, tipoLogin){ var dados = { pagina: pagina, qdade_result_pagina: qdade_result_pagina, idLocalidade: idLocalidade, tipoLogin: tipoLogin } $.post('listar_alunos_ead_db', dados , function(data){ $('#resultAlunOnline').html(data); }); } }else{ $.post('buscar_aluno_ead', {buscarAlunoOnline: buscarAlunoOnline, idLocalidade: <?php echo $unidadeTrabalho?>, tipoLogin: <?php echo $tipoLogin?>},function(data){ $('#resultAlunOnline').html(data); }); } }); até aqui tudo bem funcionou, o usuario digita, é disparado e chama a função buscar_aluno_ead, quando a pagina é aberta sem nenhuma busca eu chamo a função listar_alunos_ead_db agora o b.o é o seguinte eu tinha uma janela modal que se abria pra poder fazer algumas alterações e edições, que parou de funcionar devido essa coisa que fiz, antes funcionava, antes de chamar as paginas assim via javaScript, o que posso fazer pra arrumar????
-
Boa galera estou com um B.O aqui, seguinte.... Tenho uma janela MODAL com itens do cardápio que será escolhido pelo cliente. Cada item que o cliente escolhe abro uma janela MODAL com os itens extras disponíveis ele clica nos devidos itens extras que ele quiser adicionar ao pedido até aqui tudo bem já consegui esta abrindo normal tudo certinho os itens com os itens extras disponíveis, porem como somar os itens extras juntamente com o valor do ITEM PEDIDO, tipo, o cardápio do estabelecimento possui 4 itens X-TUDO - R$ 15,00 X-FRANGO - R$ 12,00 X-BACON - R$ 13,00 X-SALADA - R$ 10,00 AGORA em cada item selecionado existe os itens extras que o cliente pode escolher como adicional tipo: CALABRESA - R$ 1,00 FRANGO - R$ 1,00 BACON - R$ 1,00 PRESUNTO - R$ 1,00 MUSSARELA - R$ 1,00 Então como somar esses itens extras selecionados ao valor do item pedido, tipo o usuário escolhe o X-TUDO - R$15,00 - - - - Abro uma janela MODAL com os itens extras disponíveis e o usuário escolhe os itens extras CALABRESA + BACON + MUSSARELA e vai somando ao valor do item ( R$15,00 + 1,00 + 1,00 + 1,00 ) = R$18,00 Tenho esta estrutura.... <script> $(document).ready(function() { calcTotal(); var limpaValor = ""; document.getElementById("zerarValor").innerHTML = limpaValor; document.getElementById("check").checked = false; $('.price-variant, .price-variant-text').change(function() { calcTotal(); }); $('.price-variant-text').keyup(function() { calcTotal(); }); }); function calcTotal() { var total = 0; $('.price-variant').each(function() { var isChecked = $(this).is(':checked'); if(!!isChecked) { total += Number($(this).val()); } }); $('.price-variant-text').each(function() { total += Number($(this).data('unitprice')) * Number($(this).val()); }); $('.total').text('R$ ' + total.toFixed(2)); } </script> porém não consigo fazer ele zerar o valor total a cada MODAL e nem os checkboxes marcados aberto. Tipo eu escolho o X-TUDO e marco os itens extras (CALABRESA + BACON + MUSSARELA) agora quando abro o outro item(outra janela modal) X-FRANGO os valores marcados anteriormente estão sendo somados
-
Boa noite! Td bem com vcs? Peguei um codigo de modal muito util para mim, mas ele naun sai do lugar, estou tentando posiciona lo em outro lugar e naun consigo. Ja fiz de tudo e nada resolveu alguém pode me ajudar? Gostaria que ele ficasse, aonde eu colocar ele aceitar e rodar. segue o codigo abaixo: <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} /* Button used to ppen the contact form - fixed at the bottom of the page */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; bottom: 23px; right: 28px; width: 280px; } /* The popup form - hidden by default */ .form-popup { display: none; position: fixed; bottom: 0; right: 15px; border: 3px solid #f1f1f1; } /* Add styles to the form container */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Full-width input fields */ .form-container input[type=text], .form-container input[type=file], .form-container input[type=textarea] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* When the inputs get focus, do something */ .form-container input[type=text]:focus, .form-container input[type=file]:focus, .form-container input[type=textarea]:focus { background-color: #ddd; outline: none; } /* Set a style for the submit/login button */ .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.8; } /* Add a red background color to the cancel button */ .form-container .cancel { background-color: red; } /* Add some hover effects to buttons */ .form-container .btn:hover, .open-button:hover { opacity: 1; } </style> <button class="open-button" onclick="closeForm()">Open Form</button> <div class="form-popup" id="myForm"> <form action="/action_page.php" class="form-container"> <h1> <img src="http://mercatotal.com.br/gnservice/img/logotipo2.png" width="170px" height="70px"/></h1> <label for="nome"><b>Nome:</b></label> <input type="text" placeholder="Seu Nome" name="nome" required/> <label for="foto"><b>Foto:</b></label> <input type="file" placeholder="Sua Foto" name="foto" required/> <label for="comment"><b>Comentários:</b></label> <textarea placeholder="Seu Comentário" name="depoimento" cols="36,7" rows="10" required></textarea> <button type="submit" class="btn">Login</button> <button type="button" class="btn cancel" onclick="openForm()">Close</button> </form> </div> muito obrigado!
-
Boa tarde colegas programadores, estou com uma dúvida tremenda. Estou desenvolvendo um sistema para uma loja de veículos, e em uma parte do sistema, em cadastro de clientes, vai aparecer todos os clientes que ela possui em uma tabela(Usando DataTable do bootstrap), em cada cadastro, tenho um botão de editar, que imediatamente, abre uma janela modal com os dados daquele Cliente. Quando eu clico pela primeira vez em algum botão de Editar, ele me abre correto e o fechar é funciona normal. Agora vou clicar no editar novamente, porque anteriormente eu havia clicado no cliente errado, ele me traz os dados correto, mas o botão CANCELAR não funciona mais, preciso dar F5 para ele sumir. O que eu estaria fazendo de errado? Segue abaixo o meu código: <!DOCTYPE html> <html> <head> <title>Clientes</title> <link rel="shortcut icon" href="../assets/img/certi.png" type="image/x-icon" /> <form name="formulario" method="POST" action=""> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" /> <link href="../assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="../assets/js/bootstrap.min.js"></script> <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script> <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script> <script type="text/javascript"> function Ir(pagina){ document.formulario.action = pagina document.formulario.submit(); } </script> </head> <body onselectstart="return false" oncontextmenu="return false" ondragstart="return false" onMouseOver="window.status='..message perso .. '; return true;"> <div class="container"> <center> <img src='../assets/img/logo_clientes.jpg' class="img-responsive"> </center> <br /> <?php if(!empty($Dados["btnNovoCad"])): $NovoCad = new CreateCliente(); unset($Dados["btnNovoCad"]); $Dados["cli_garagem"] = $_SESSION["id-garagem"]; $NovoCad->exeCreate('clientes', $Dados); echo $NovoCad->getMsg(); endif; ?> <div class="table-responsive"> <table id="employee_data" class="table table-striped table-bordered"> <thead> <tr> <td>ID</td> <td>Nome</td> <td>Ações</td> </tr> </thead> <?php $ChamarLeitura = new ReadCliente(); $ChamarLeitura->LerClientes(); foreach($ChamarLeitura->getResultado() as $clientes){ extract($clientes); echo ' <tr> <td>'.intval($cli_id).'</td> <td>'.utf8_decode($cli_nome).'</td> ';?> <td> <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModalEdit" data-whatever="<?php echo $cli_id; ?>" data-whatevernome="<?php echo utf8_decode($cli_nome);?>">Editar</button> </td> </tr> <?php } ?> </table> </div> </div><br> <center> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalNovo">Novo Cliente</button> <button type="button" class="btn btn-primary" onClick="Ir('index');">Voltar ao Menu</button><br><br> </center> <!-- Inicio Modal Novo Cadastro --> <div class="modal fade" data-backdrop="static" id="myModalNovo"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="exampleModalLabel">Cadastrar Cliente</h3> </div> <div class="modal-body"> <form name="formularioB" method="POST" action=""> <div style="text-align: left;"> Nome:* <input type="text" class="form-control" name="cli_nome" required="true" autofocus="true"><br> *Campos obrigatórios </div> <div class="modal-footer"> <input type="submit" class="btn btn-success" name="btnNovoCad" value="Salvar"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> </div> </form> </div> </div> </div> </div> <!-- Fim Modal --> <!-- Inicio Modal Editar Cadastro --> <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="exampleModalLabel">Editar Cliente</h3> </div> <div class="modal-body"> <form name="formularioB" method="POST" action=""> <div style="text-align: left;"> Nome:* <input type="text" class="form-control" name="cli_nome" id="cli_nome" required="true" autofocus="true"><br> </div> <div class="modal-footer"> <input type="submit" class="btn btn-success" name="btnEditCad" value="Salvar"> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> <input type="hidden" name="id-cliente" id="id-cliente" value=""> </div> </form> </div> </div> </div> </div> <!-- Fim Modal --> <script type="text/javascript"> $('#myModalEdit').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) var recipient = button.data('whatever') var recipientnome = button.data('whatevernome') var modal = $(this) modal.find('.modal-title').text('Editar Cliente') modal.find('#id-cliente').val(recipient) modal.find('#cli_nome').val(recipientnome) }) </script> </form> </body> </html> <script> $(document).ready(function(){ $('#employee_data').DataTable(); }); </script>
-
- modal
- javascript
-
(e mais 1 )
Tags:
-
Bom dia, estou com um problema que ao inserir um registro no banco a confirmação via modal não ocorre, mas se eu coloco um botao chamando o modal ele é exibido, ou seja, os scripts e plugins estão corretos né ?! Acho que estou esquecendo de algo para chama-lo, se alguem puder ajudar agradeço. <?php if(isset($_POST['btncadastrar'])){ $obra = strtoupper($_POST['obra']); $status = strtoupper($_POST['status']); $cadastrar = "INSERT INTO tblCliente (obra_cliente,status) VALUES ('$obra','$status')"; $cadastra = mysqli_query($con,$cadastrar); ?> <div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="avisoLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Usuário cadastrado com Sucesso!</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Corrigir Cadastro</button> <a href="index.php"><button type="button" class="btn btn-success">Ok</button></a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#aviso').modal('show'); }); </script> <?php } ?>
-
Ola, Não entendi ainda porque não envia via POST os dados no AJAX, vai direto para o error, e abre o Modal dizendo que houve o erro e rapidamente direciona para a página, mesmo esse modal não sendo para isso... Coloquei o Alert e ele faz a mesma coisa, abre o Alert de Error e direciona para página... Não estou utilizando a url:, pois o caminho é o mesma da página e mesmo utilizando, nada muda... colocando em outro php e chamando, também dá erro. Preciso entender sobre essa situação para enviar meus dados via POST e ajax $(document).on("click", '#updateStatusEquip', function() { $.ajax({ type: "POST", data: { value_id : $('#admin_id').val() }, success: function(data) { // Check the output of ajax call on firebug console console.log(data); $(".modal-body-info").html("Sucesso: Status do Registro alterado com sucesso"); $("#myModalMessage").modal("show"); }, error: function () { $(".modal-title").html("Erro"); $(".modal-body-info").html("Erro: Registro não foi inserido"); $("#myModalMessage").modal("show"); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Modal - Message --> <div class="modal fade" id="myModalMessage" tabindex="-1" role="dialog" aria-labelledby="myModalMessage"> <form method="post" id="ze-form" > <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title"></h4> <button type="button" class="close" id="reloadTable" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="modal-body-info"> <b>Registro de:</b><br>Jonhy<input type="hidden" name="admin_id" id="admin_id" value="2"><br><b>Têm certeza que deseja alterar o status desse registro?</b><br>Poderá não ser capaz de acessar o Sistema</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" id="reloadTable" data-dismiss="modal">Fechar</button> <div class="modal-footer-button"><button type="submit" name="updateStatusEquip" id="updateStatusEquip" title="Alterar..." class="btn btn-warning">Alterar <i class="fas fa-level-up-alt ze-icon-m"></i><i class="fas fa-level-down-alt ze-icon-m"></i> </button></div> </div> </div> </div> </form> </div>
-
Boa tarde; Eu estou com um probleminha aqui que eu não consegui resolver. O que eu quero, eu tenho uma pagina com 2 modal. Um modal dentro do outro. Exemplo: Quando eu abro um MODAL, eu tenho uma botão para abrir um novo modal. Ele abre certinho, porem na hora de fechar. Eu clico no botão fechar, ele fecha os dois MODAL. E eu quero fechar somente o segundo modal que abre. Abaixo segue o meu codigo. <div class="modal fade" id="ListagemRede" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title font-weight-bold" id="exampleModalLabel">LISTA DE REDES CADASTRADAS</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <table class="table text-center"> <thead> <tr> <th scope="col">#</th> <th scope="col">Nome Rede</th> <th scope="col">Ação</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Rede 1</td> <td> <i class="fa fa-pencil fa-2x" style="color:#FB8A52;" data-toggle="modal" data-target="#EditarRede<%=r("id")%>"></i> <!-- Modal Editar a Rede --> <div class="modal fade" id="EditarRede<%=r("id")%>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form method="post" action="insere_rede.asp" id="forcadrede"> <div class="form-row"> <div class="form-group col-md-4"> <input type="hidden" name="master" value="1" required> <label for="inputEmail4" class="font-weight-bold">*Nome Rede</label> <input type="text" name="nome" class="form-control blocochamada text-center" id="inputEmail4" placeholder="*Nome da Rede" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Grupo Coord.</label> <select id="inputEstado" name="coorden" class="form-control blocochamada text-center" autocomplete="off" required> <% set rscoord = conn.execute("select * from Inv_coord_grupo") %> <option selected>Escolher...</option> <% while rscoord.eof = false %> <option value="<%=rscoord("id")%>"><%=rscoord("nome_coordenador")%></option> <% rscoord.movenext wend %> </select> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Contrato Qtde</label> <input type="number" name="contratoqtde" class="form-control blocochamada text-center" id="inputCEP" placeholder="Contrato Qtde" autocomplete="off" required> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label for="inputEmail4" class="font-weight-bold">*Valor Contrato</label> <input type="text" name="vlrcontrato" class="form-control blocochamada text-center" id="vlrContrato" placeholder="*Valor Contrato" autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputCEP" class="font-weight-bold">*Valor Cont. Adici.</label> <input type="text" name="vlrcontadici" class="form-control blocochamada text-center" id="vlrContAdicion" placeholder="Valor Cont. Adici." autocomplete="off" required> </div> <div class="form-group col-md-4"> <label for="inputEstado" class="font-weight-bold">*Status</label> <select id="inputEstado" name="status" class="form-control blocochamada text-center" autocomplete="off" required> <option selected>Escolher...</option> <option value="1">Ativo</option> <option value="0">Desativado</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btnfechar" data-dismiss="modal">Fechar</button> <button type="submit" class="btn btn-primary btnsubmit">Salvar</button> </div> </form> </div> </div> </div> </div> </td> </tr> </tbody> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> Quem puder me ajudar. Att; Gilberto Jr