Jump to content

Search the Community

Showing results for tags 'modal'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 64 results

  1. lamounier

    Fechar modal com vídeo

    Estou desenvolvendo um site que carrega os últimos 6 vídeos adicionados, e quando clica em algum abre um modal para assistir o vídeo, quando fecho o modal o vídeo continua rodando, estou tentando fazer com que o vídeo pare mas não estou conseguindo. home.php <?php if (!empty($videos)) { $i=0; foreach ($videos $videos) { ?> <div class="col-md-4"> <div class="ot-portfolio-item"> <figure class="effect-bubba"> <div class="embed-responsive embed-responsive-16by9"> <iframe width="949" height="534" src="https://www.youtube.com/embed/<?=$video["link"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <figcaption> <a href="#" class="video-btn" id="#video_<?=$video["video_id"]?>" data-src="https://www.youtube.com/embed/<?=$video["link"]?>" data-toggle="modal" data-target="#video_<?=$video["video_id"]?>"></a> </figcaption> </figure> </div> </div> <div class="modal fade" id="video_<?=$video["video_id"]?>" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="X"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="Modal-label-1"><?=$video["titulo"]?></h4> </div> <div class="modal-body"> <div class="embed-responsive embed-responsive-16by9"> <iframe id="video_iframe" width="949" height="534" src="https://www.youtube.com/embed/<?=$video["link"]?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="modal-works"><span><?=$video["autor"]?></span></div> <p><?=$video["video_description"]?></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default teste" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> <?php if (++$i == 6) break;} // FOREACH } // IF ?> </div> .js var videoSrc; var videoId; $('.video-btn').click(function() { videoSrc = $(this).data( "src" ); videoId = $(this).data('target'); //aqui pego o id do modal }); //aqui pauso o vídeo quando fecho o modal, mas só funciona se eu colocar diretamente o id "$('#video_...') " $(videoId ).on('hide.bs.modal', function () { $("#video_iframe").attr('src',videoSrc); }) alguém sabe como faço para o modal para o vídeo quando fechado?
  2. manolegal

    Limpar modal bootstrap ao fechar

    Bom dia Após selecionar a Pessoa em um formulário, tenho um botão para editar os dados desta pessoa em um Modal: <span class="input-group-addon"><a href="#" id="btn_editar" class="glyphicon glyphicon-pencil" data-toggle="modal" data-target="#modal_edit_pessoa_red"></a></span> Busco os dados no BD e preencho os inputs do modal: <script type="text/javascript"> $(document).ready(function () { $('#btn_editar').click(function () { var id = $("#id_cont_hid").val(); var id_cont= JSON.stringify(id); $.ajax({ type: "POST", url: "minha_busca_bd?id=" + id, cache: false, data: "{'id':'" + id_cont + "'}", dataType: 'json', }).done(function(retorno){ if (retorno.inserido == true) { $('#md_edit_pes_cpf').val(retorno.dados.cpf); // Atualizo valor campo cpf $("#md_edit_pes_cpf").mask("999.999.999-99"); // Adiciono máscara cpf } .......... Em relação aos dados está funcionando corretamente. O problema é em relação às máscaras de entrada dos campos (cpf) que na primeira vez que for alterar os dados está vindo corretamente, porém, caso tente alterar novamente os dados da mesma pessoa, a máscara não funciona (não vem formatado corretamente). Outro detalhe é que o modal não está sendo resetado (limpo), principalmente após tentativa de edição e ser mostrada mensagem do arquivo PHP que faz a validação dos dados inseridos, uma vez que ao fechar o modal e ao reabri-lo novamente continua mostrando a mensagem de validação, o que eu não gostaria que acontecesse, mas que cada vez que o modal fosse fechado ou finalizado, limpassem os seus dados, para novamente serem carregados após clicar no botão de edição. Partes do código que faço a validação do modal: var serialize_dados = $('#form_mod_pes_edit_red').serialize(); $.ajax({ type: "POST", url: "arquivo_validar.php", data: serialize_dados, dataType: 'json', encode: true, cache: false, }).done(function(retorno){ if (retorno.inserido == true) { $("#mensagem_edit_pes_red").html("Cadastro alterado com sucesso!"); //auto.trigger('click'); $('#form_mod_pes_edit_red').each (function(){ // Limpar campos do Form this.reset(); $('#mensagem_edit_pes_red').html(""); $('#form_mod_pes_edit_red')[0].reset(); }); setTimeout(function () { //$('#modal_edit_pessoa_red').on("hidden.bs.modal", function(){ $(this).removeData(); }); $('#mensagem_edit_pes_red').html(""); // Limpa mensagens $('#modal_edit_pessoa_red').modal('hide') //$('#form_mod_pes_edit_red').on('hidden.bs.modal', function () { //$('#modal_edit_pessoa_red').on('hidden.bs.modal', function(){ $(this).find('form')[0].reset(); }); }, 2000); // 2seg $('#obs_ped').val("Endereço: "+ retorno.dados.endereco+ " Telefone: "+ retorno.dados.telefone); } else{ if (retorno.erros){ $('#mensagem_edit_pes_red').html(""); for(var i=0;i<retorno.erros.length;i++) { $('#mensagem_edit_pes_red').append(retorno.erros[i] + "<br>"); } } else{ $("#mensagem_edit_pes_red").html("Não foi possível completar o cadastro. Tente novamente!"); } } }); Já tentei de várias maneiras, porém não consigo encontrar a solução. No botão fechar do modal também inseri vários códigos para tentar limpar o modal ao sair, porém não obtive sucesso. Se alguém tiver alguma dica, agradeço.
  3. Boa noite pessoal, estou aprendendo web e estou passando trabalho com uma janela modal. na versão desktop para que o modal apareça direito preciso colocar varios <br> antes do footer se não ele fica perdido no meio do modal, ja na versão mobile ele fica com um espação antes do footer devido aos <br> se eu tiro ele acerta o mobile mas da problema no desktop. alguém pode me ajudar? abaixo o modal <!-- Modal Cadastrar--> <div class="modal fade" id="novo_cadastro" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Novo Associado</h4> </div> <div class="modal-body"> <div class="col-md-2"> <label for="c_id">ID</label> <input type="text" class="form-control cadastro" id="c_id" placeholder="*" disabled=""> <br> </div> <div class="col-md-10"> <label for="c_empresa">Empresa</label> <input type="text" class="form-control cadastro" id="c_empresa" name="c_empresa" placeholder="Empresa" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-3"> <label for="c_cnpj">CNPJ</label> <input type="text" class="form-control cadastro" id="c_cnpj" name="c_cnpj" onkeypress="$(this).mask('00.000.000/0000-00');" placeholder="Ex.: 00.000.000/0001-00" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_ie">I.E</label> <input type="text" class="form-control cadastro" id="c_ie" name="c_ie" onkeypress="$(this).mask('0.000.000');" placeholder="Ex.: 000.000.000" autocomplete="off" required> <br> </div> <div class="col-md-3"> <label for="c_ass">Contato</label> <input type="text" class="form-control cadastro" id="c_nome" name="c_nome" placeholder="Nome" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_segmento">Segmento</label> <select id="c_segmento" name="c_segmento" class="form-control input-md cadastro"> <option value='1'>ALIMENTAÇÃO</option> <option value='0'>COMÉRCIO</option> </select> <br> </div> <div class="col-md-3"> <label for="c_telefone">Telefone</label> <input type="text" class="form-control cadastro" id="c_telefone" name="c_telefone" onkeypress="$(this).mask('(00) 0000-00009')" placeholder="(XX) XXXXX-XXXX" autocomplete="off" required> <br> </div> <div class="col-md-5"> <label for="c_email">E-mail</label> <input type="email" class="form-control cadastro" id="c_email" name="c_email" placeholder="XXX@XXX.com.XX" style="text-transform:lowercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_status">Status</label> <select id="c_status" name="c_status" class="form-control input-md cadastro"> <option value='1'>ATIVO</option> <option value='0'>INATIVO</option> </select> <br> </div> <div class="col-md-2"> </div> <div class="col-md-6"> <label for="c_endereco">Endereço</label> <input type="text" class="form-control cadastro" id="c_endereco" name="c_endereco" placeholder="Endereço" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_nro">Nro</label> <input type="number" class="form-control cadastro" id="c_nro" name="c_nro" placeholder="NRO" onkeypress="$(this).mask('00000')" required> <br> </div> <div class="col-md-4"> <label for="c_bairro">Bairro</label> <input type="text" class="form-control cadastro" id="c_bairro" name="c_bairro" placeholder="Bairro" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_complemento">Complemento</label> <input type="text" class="form-control cadastro" id="c_complemento" name="c_complemento" placeholder="Complemento" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-4"> <label for="c_municipio">Município</label> <input type="text" class="form-control cadastro" id="c_municipio" name="c_municipio" placeholder="Município" style="text-transform:uppercase" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_cep">Cep</label> <input type="text" class="form-control cadastro" id="c_cep" name="c_cep" placeholder="CEP" onkeypress="$(this).mask('00000-000')" autocomplete="off" required> <br> </div> <div class="col-md-2"> <label for="c_uf">UF</label> <select id="c_uf" name="c_uf" class="form-control input-md cadastro"> <option value="">Selecione</option> <option value="AC">Acre</option> <option value="AL">Alagoas</option> <option value="AP">Amapá</option> <option value="AM">Amazonas</option> <option value="BA">Bahia</option> <option value="CE">Ceará</option> <option value="DF">Distrito Federal</option> <option value="ES">Espirito Santo</option> <option value="GO">Goiás</option> <option value="MA">Maranhão</option> <option value="MS">Mato Grosso do Sul</option> <option value="MT">Mato Grosso</option> <option value="MG">Minas Gerais</option> <option value="PA">Pará</option> <option value="PB">Paraíba</option> <option value="PR">Paraná</option> <option value="PE">Pernambuco</option> <option value="PI">Piauí</option> <option value="RJ">Rio de Janeiro</option> <option value="RN">Rio Grande do Norte</option> <option value="RS">Rio Grande do Sul</option> <option value="RO">Rondônia</option> <option value="RR">Roraima</option> <option value="SC">Santa Catarina</option> <option value="SP">São Paulo</option> <option value="SE">Sergipe</option> <option value="TO">Tocantins</option> </select> <br> </div> <div class="col-md-12"> <label for="c_descricao">Descrição</label> <textarea class="form-control" id="c_descricao" name="descricao" rows="4" cols="130"></textarea> <br> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" id="cadastrar">Cadastrar</button><button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button> </div> </div> </div> </div>
  4. lordstarlight

    Como abro janela modal com input image ?

    Olá galera, Tenho um código que abre uma janela modal clicando num botão . Como faço para adaptar esse código para abrir usando um <input type="image" ... ? Abraço !!! <script type="text/javascript"> $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </script> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Janela Modal</h4> </div> <div class="modal-body"> <p>Texto<br> Mais Texto<br> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  5. manolegal

    Passar valor JSON para modal

    Bom dia Já fiz dezenas de pesquisas, porém não consigo resolver o problema. Tenho um modal onde edito dados da pessoa selecionada pelo usuário em um formulário. Esta pessoa é selecionada no formulário (através autocomplete jquery), não vindo de uma pesquisa do BD, por este motivo estou tendo dificuldade para selecionar os dados da pessoa pois preciso pegar os valores vindos por JSON e passá-los para o modal. Meu arquivo e retorno JSON: while ($linha = @pg_fetch_array($Resultado_lista)){ $id_contribuinte_bd = $linha["id_contribuinte"]; $contribuinte_bd = $linha["contribuinte"]; $endereco_bd = $linha["endereco"]; $telefone = $linha["telefone"]; $array_dados[] = array('label' => $contribuinte_bd. '' .$cnpj_ou_cpf_mostra. '' .$pessoa_ou_empresa_bd_mostra, 'value' => $linha['id_contribuinte'], 'p_ou_e' => $linha['pessoa_ou_empresa'], 'ender_p_e' => 'Endereço: '.$linha['endereco'].''.$telefone_formato); } // Fecha While echo json_encode($array_dados); // Retorno dados: 0 label AGORA DE TESTES2 value 2672 p_ou_e PESSOA ender_p_e Endereço: Testes 1 label AGORA NOVO value 2654 p_ou_e PESSOA ender_p_e Endereço: ihlgkjlfdjkfdkjfd 2 label AGORA OUTRO TESTE value 2673 p_ou_e PESSOA ender_p_e Endereço: Teste endereço ........, etc //Preview [{"label":"AGORA DE TESTES2","value":"2672","p_ou_e":"PESSOA","ender_p_e":"Endere\u00e7o: Testes"},{"label":"AGORA NOVO","value":"2654","p_ou_e":"PESSOA","ender_p_e":"Endere\u00e7o: ihlgkjlfdjkfdkjfd"},{"label.......,etc Função Jquery para autocomplete pessoa e postar dados em alguns campos do formulário principal: <script type="text/javascript"> $(document).ready(function(){ $('#pesq').autocomplete({ source: "ajx_pes_p_nom_ui.php?md=sv", minLength: 1, select: function (event, ui) { $("#pesq").val(ui.item.label); $("#solicitante").val(ui.item.value); $("#pe_hid").val(ui.item.p_ou_e); $("#endereco_hid").val(ui.item.ender_p_e); $("#obs_ped").val(ui.item.ender_p_e); //$("#modal_edit_pessoa_red.md_pes_nome").val(ui.item.ender_p_e); event.preventDefault(); } }); }); </script> No formulário principal estou conseguindo inserir os dados vindo por JSON normalmente. Quando trago dados para edição do BD, também consigo inserir os dados normalmente no modal. Nesta situação, como faço por exemplo, paga "pegar" uma destas variáveis e inseri-las em um campo de um formulário modal?
  6. Artes Ussler

    Jquery Modal ao abrir site

    Olá Alguém já usou o modal deste link: https://jquerymodal.com/ e alterou ele para abrir um modal ao acessar a página, e não ao clicar em um link? Caso alguém tenha feito e puder me mostrar como faz, fico grato.
  7. Olá pessoal, estou criando um sistema de portfólios e fiz tudo funcionar sem PHP, quando transformei o sistema em dinâmico não está mais abrindo o modal de cada portfólio qd clica nele, sendo que eu inspecionei a página e está pegando os valores corretos na ID, só não está abrindo mesmo, e outro modal sem o PHP continua abrindo normalmente. <section id="portfolio"> <div class="container"> <div class="text-center"> <h3 class="section-heading">Portfólio</h3> </div> <ul id="port-group"> <?php while($dado = mysqli_fetch_assoc($consulta) ) { ?> <li> <div class="portfolio-item"> <a href="#portmodal<?php echo $dado['id']; ?>" class="portfolio-link" data-toggle="modal"> <div class="portfolio-hover"> <div class="portfolio-hover-content pagport"> <i class="fa fa-plus fa-3x"></i> </div> </div> <div class="portfolio-responsive idportimg1"> <style>.idportimg1 {background-image: url("img/bg.png")}</style> </div> </a> <div class="portfolio-caption"> <h5><?php echo $dado['titulo']; ?></h5> <p class="text-muted"><?php echo $dado['subtitulo']; ?></p> </div> </div> </li> <!-- Portfolio Modal --> <div class="portfolio-modal modal fade" id="portmodal<?php echo $dado['id']; ?>>" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="close-modal" data-dismiss="modal"> <div class="lr"> <div class="rl"> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-2"> </div> <div class="col-lg-8"> <div class="modal-body"> <h3><?php echo $dado['titulo']; ?></h3> <img class="img-responsive img-centered" src="img/portfolio/site1.jpg" alt=""> <p><?php echo $dado['descricao']; ?></p> <img class="img-responsive img-centered" src="img/portfolio/site11.jpg" alt=""> <ul class="list-inline"> <li><?php echo $dado['datax']; ?></li> <li><?php echo $dado['cliente']; ?></li> <li><?php echo $dado['categoria']; ?></li> </ul> <button type="button" class="btn-close" data-dismiss="modal"><i class="fa fa-times"></i> Fechar</button> </div> </div> <div class="col-lg-2"> </div> </div> </div> </div> </div> </div> <?php } ?> </ul> </div> </section>
  8. AlexandrePrezzi

    Abrir modal que está em outro arquivo

    Seguinte: Em um arquivo teste.php tem um monte de coisas e também tem um modal la pelo meio. <div class="modal fade" id="myModalDadosBasicos" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_DadosBasicos" aria-hidden="true" data-backdrop="static"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel_DadosBasicos"></h4> </div> <div class="modal-body"> .... Em outro arquivo "principal.php" criei um botão. Gostaria de saber como posso far para quando eu clicar nesse botao, abrir o modal que esta no outro arquivo. Codigo do botão <button type="button" title="Abre Modal" class="btn btn-xs btn-success tp btnAbreModal">Transformar em Pedido Novo</button> O que eu tentei fazer baseado em dicas de outros: $('.btnAbreModal').on('click', function(e){ $.ajax({ type: 'POST', //Caminho do arquivo do seu modal url: 'teste.php', success: function(data){ alert(data); $('#myModalDadosBasicos').modal('show'); } }); }); A questão é .... como defino que o que eu quero abrir na minha página seja somente o modal "myModalDadosBasicos".
  9. Gustavo2503

    Função dentro de função

    Eu estou criando uma classe que cria modais usando React, eu preciso criar um modal dentro de um modal, para isso, eu quero chamar a mesma função dentro dela mesma. O modal é criado, mas o problema é que ele não abre, abre o modal principal (#modal-1), mas não abre o sub modal (#modal-2), veja como ficou meu código: index.html <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="js/modal.js" type="text/babel"></script> <link rel="stylesheet" href="css/modal.css"> </head> <body> <div align="center"> <h1>Modal</h1> </div> <button type="button" data-modal="modal-1">Open Modal</button> <div id="modal-content"></div> <script type="text/babel"> const contentSub = [ <h2>Title SubModal 1</h2>, <p>SubModal</p>, <small>Rodapé submodal 1</small> ]; const idSub = "modal-2"; const content = [ <h2>Title 1</h2>, <section> <button type="button" data-modal="modal-2">Open SubModal</button> <Modal id={idSub} content={contentSub}/> </section>, <small>Rodapé 1</small> ]; const id = "modal-1"; ReactDOM.render( <Modal id={id} content={content}/>, document.getElementById('modal-content') ); </script> </body> </html> js/modal.js class Modal extends React.Component{ constructor(props) { super(props); this.id = this.props.id; this.backgroudColorHeader = this.props.backgroudColorHeader === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorHeader; this.textColorHeader = this.props.textColorHeader === undefined ? '#fff' : this.props.textColorHeader; this.backgroudColorBody = this.props.backgroudColorBody === undefined ? 'rgba(255, 255, 255, 1)' : this.props.backgroudColorBody; this.textColorBody = this.props.textColorBody === undefined ? '#000' : this.props.textColorBody; this.backgroudColorFooter = this.props.backgroudColorFooter === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorFooter; this.textColorFooter = this.props.textColorFooter === undefined ? '#fff' : this.props.textColorFooter; this.borderRadius = this.props.borderRadius === undefined ? '8px' : this.props.borderRadius; this.content = this.props.content === undefined ? [<h2>header content</h2>, <p>body content</p>, <p>footer content</p>] : this.props.content; this.size = this.props.size === undefined ? 3 : this.props.size; } closeModal = () => { $('#'+this.id).removeClass("show"); $('body').removeClass("overflow-hidden"); }; render(){ $(`[data-modal]`).click( function () { var id = $(this).attr("data-modal"); var el = document.getElementById(id); $(el).addClass("show"); $('body').addClass("overflow-hidden"); }); var background, text; background = this.backgroudColorHeader; text = this.textColorHeader; const transparencyBackgroundHeader = background.substring(background.length-2,background.length-1) -.1; const backgroundColorHeader = `${background.substring(0,background.length-2)}${transparencyBackgroundHeader})`; const styleColorHeader = { backgroundColor: backgroundColorHeader, color: text, borderBottom: `1px solid ${background}` }; background = this.backgroudColorBody; text = this.textColorBody; const styleColorBody = { backgroundColor: background, color: text }; background = this.backgroudColorFooter; text = this.textColorFooter; const transparencyBackgroundFooter = background.substring(background.length-2,background.length-1) -.1; const backgroundColorFooter = `${background.substring(0,background.length-2)}${transparencyBackgroundFooter})`; const styleColorFooter = { backgroundColor: backgroundColorFooter, color: text, borderTop: `1px solid ${background}` }; const styleBorderRadius = {borderRadius: this.borderRadius}; const eDivision = ['h', 'b', 'f']; const eContent = this.content; var div = []; for (var i=0;i<eContent.length;i++){ const part = eDivision[i].replace('h', 'header').replace('b', 'body').replace('f', 'footer')+"-modal"; const closeModal = i === 0 ? <span onClick={this.closeModal} className="close-modal"><i className="material-icons">close</i></span> : "" ; var style; if (i===0) style = styleColorHeader; else if (i===1) style = styleColorBody; else style = styleColorFooter; div.push(<div key={i+1} className={part} style={style}> {closeModal} {eContent[i]} </div>); } const eSize = this.size; const s = ['s', 'm-s', 'm', 'm-l', 'l']; const size = s[eSize-1]; const classModal = (size !== "s" && size !== "m-s" && size !== "m" && size !== "m-l" && size !== "l") ? 'modal-modal modal-m' : "modal-modal modal-"+size; return <div id={this.id} className={classModal}> <div className="overflow-modal"> <div className="container-modal" style={styleBorderRadius}> {div} </div> </div> </div>; } }
  10. Olá a todos. Tenho um formulário que esta inserido em um código Bootstrap Modal. Quando os valores são inseridos nos campos input, o Ajax script passa esses valores para um arquivo php e retorna com um alert de sucesso. O que ocorre é que somente o alert aparece, porém quando clica no botão OK deste alerta o Modal não fecha. Abaixo segue o código do popup Modal e o script Ajax: <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal"></button> <!-- Modal --> <div class="modal fade" id="dataModal" 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" >Adicionar dados</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="usersform" method="post"> <input type="text" name="nome" id="nome"/> <input type="email" name="email" id="email"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCELAR</button> <button type="submit" class="btn btn-success" id="submit" >ADD USER</button> </form> </div> </div> </div> </div> E abaixo segue o Ajax script ao qual faz a passagem dos valores input para o arquivo insert.php que no caso funciona corretamente inserindo os dados no banco de dados: <script> $(document).on('submit', '#usersform', function(event){ event.preventDefault(); $.ajax({ url:"insert.php", method:'POST', data:new FormData(this), contentType:false, processData:false, success:function(data){ alert("Cadastro realizado com sucesso!"); $("#usersform")[0].reset(); $("#dataModal").modal('hide'); } }); }); </script> O que ocorre é que o popup Modal não fecha apesar do código $("#dataModal").modal('hide'); estar após o alert e nem "zera" os campos após o resultado de sucesso. Os dados são inseridos normalmente após clicar no "ok" da tela de mensagem do alert. O que pode ser? Obrigado.
  11. Camila97

    Modal em JS

    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?
  12. Bom dia Em um modal bootstrap de cadastro, após submete-lo e não tendo sido informado todos os dados obrigatórios, o mesmo é ampliado, uma vez que são mostradas mensagens de preenchimento obrigatório. Após esta ação, não consigo realizar a rolagem do modal, não tendo acesso aos campos inferiores do form e nem ao botão de submit. Realizei várias pesquisas, porém não obtive sucesso. Partes do código: <div class="modal fade" id="modal_cad_pessoa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Cadastrar Pessoa</h4> </div> <div class="modal-body"> <div class="container-fluid" id="container"> <div class="row"> <div class="row"> <div id="mensagem_pes" class="col-md-10 col-md-offset-1 form_div_mensagem_erro_modal"></div> </div> </div> <div> <form method="post" id="form_mod_pes_cad" nome="form_mod_pes_cad"> <div class="row"> <div class="form-group col-md-5"> <label>Nome</label> <input class="form-control" type="text" id="md_pessoa_nome" name="md_pessoa_nome" autofocus value="<?php echo $nome;?>" placeholder="Informe o Nome da Pessoa (Obrigatório)" required maxlength="50" title='(Preenchimento Obrigatório)'"> </div> </form> </div> <div class="modal-footer"> <button type="button" id="grav_md_pes" nome="grav_md_pes" class="btn btn-primary">Cadastrar</button> <button type="button" class="btn btn-default" data-dismiss="modal" id="fechar">Fechar</button> </div> </div> <!-- /container-fluid --> </div> <!-- /modal-body --> </div> <!-- /modal-content --> </div> <!-- /modal-dialog --> </div> <!-- /modal fade -->
  13. Mark Augusto

    Open Modal Materialize

    Olá. Uso o http://materializecss.com, em minhas aplicações e estou com um impasse. Eles disponibilizam um modal, muito bom por sinal. Porem, queria saber se é possivel iniciar esse modal assim que entrar na página. sem a necessidade de clicar no botão. Esse é o código de iniciação: $(document).ready(function(){ $('.modal').modal(); }); No entanto. não consigo aplicar o open(); - Certamente estou errando em algo.
  14. odenilson marques

    manter dados no formulário após erro no envio

    Boa tarde! Pessoal é o seguinte tenho formulário de cadastro onde após o preenchimento dos dados o usuário clica em cadastrar, e logo em seguida é exibido um modal informando que o cadastro foi realizado com sucesso, até tudo certo. No entanto, na minha regra de negocio sempre que o é feito um submit ha uma verificação para saber se o campo CPF já existe, e se já existir aparecerá um modal informando que já existe um cpf com o numero informado, ai crie um botão para retornar a página de cadastro para que o usuário informe outro numero de cpf, no entanto sempre que ocorre de ter que retornar para pagina para que o usuário insira um outro numero de cpf todos os campo são apagados do formulário, existe uma maneira de quando eu ter que retornar para a pagina os inputs não serem apagados ? Ferramentas: php, mysql, modal (bootstrap)
  15. Olá grandes mentes do forum imasters. Estou precisando de uma ajudinha em relação a uma dúvida. Preciso carregar um While com select dentro de um modal. O modal precisa carregar as informações do select de acordo com a opção selecionada no botão. Tentei fazendo o select com WHERE mas retornou para todos os modal. Poderiam me ajudar? Agradeço desde-já e tenham todos uma ótima semana.
  16. GustavoMagalhaes

    Abrir modal vindo de outra página

    Tenho a página de projetos (projetos.php) com vários modais, em outra página tenho uma lista de alguns projetos (fazemos.php) e gostaria de ao clicar num dos projetos de fazemos.php (link para projetos.ph?#modal1234), abrir na página projetos.php o modal correspondente. Utilizo esse javascript: <script type="text/javascript"> <!-- var ancora = window.location.href.split("#")[1]; if(ancora) { return ancora; // aqui vejo que ancora é modal1234 } (function() { 'use strict'; function remoteModal(idModal) { var vm = this; vm.modal = $(idModal); if (vm.modal.length == 0) { return false; } if (window.location.hash == idModal) { openModal(); } var services = { open: openModal, close: closeModal }; return services; // method to open modal function openModal() { vm.modal.modal('show'); } // method to close modal function closeModal() { vm.modal.modal('hide'); } } Window.prototype.remoteModal = remoteModal; })(); $(function() { window.remoteModal('#'+ancora); //Aqui deveria estar o valor #modal1234 }); //--> </script> Onde estou errando?
  17. Eliabe Andrade

    Resgatar dados vindos do BD Janela Modal

    Galera é o seguinte, não tenho muita experiência em PHP, estou começando agora e estou enfrentando o seguinte problema, estou utilizando o seguinte modelo de janela modal para resgatar os dados vindos do meu banco de dados: Varying modal content based on trigger button, porem enfrento o seguinte problema, quando programo ele para resgatar os dados em um campo input do tipo text ele regata numa boa, porem eu gostaria de recuperar este dado através de um campo input do tipo radio, mas não consigo de forma alguma, abaixo segue meu código para que vocês possam entender melhor: <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="<?php echo $cliente->id ?>" data-whateverproposta="<?php echo $cliente->proposta_valida; ?>" >Validar</button> <!-- Inicio Modal --> <div class="modal fade" id="myModal<?php echo $cliente->id ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button> <h4 class="modal-title text-center" id="myModalLabel"><?php echo $cliente->proposta_valida ?></h4> </div> <div class="modal-body"> <p><?php echo $cliente->id ?></p> <p><?php echo $cliente->proposta_valida ?></p> </div> </div> </div> </div> <!-- Fim Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="exampleModalLabel">Curso</h4> </div> <div class="modal-body"> <!--<form method="POST" action="http://localhost/Aula/aula_anterior/26-Modal-editar-curso/processa.php" enctype="multipart/form-data">--> <div class="form-group"> <label class="radio-inline"><input type="radio" name="proposta" value="1" >SIM</label> <label class="radio-inline"><input type="radio" name="proposta" value="2" >NÃO</label> </div> <input name="id" type="hidden" class="form-control" id="id-proposta" value=""> <button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button> <button type="submit" class="btn btn-danger">Alterar</button> <!--</form>--> </div> </div> </div> </div> <script type="text/javascript"> $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data('whatever') // Extract info from data-* attributes var recipientproposta = button.data('whateverproposta') // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) modal.find('.modal-title').text('ID DO CLIENTE ' + recipient) modal.find('#id-proposta').val(recipient) modal.find('.modal-body input:radio[name= proposta]') .filter(['value=' + recipientproposta + '']) .prop('checked', true); alert("O Value é: " +recipientproposta); }) </script> o meu problema é que não consigo checar o radio, até consigo resgatar o dado vindo do banco, mas não consigo fazer com que ele cheque.
  18. Me ajudem por favor, Eu preciso mandar dados de um formulário que está dentro de um modal usando AJAX, mas o problema é que quando ele manda os dados do formulário o modal fecha e a tela fica preta, mas um preto com opacidade menor. Como eu faço pra arrumar isso?
  19. Ola pessoal, bom dia, estou tentando exibir uma mensagem "enviado com sucesso" ou "ocorreu um erro", deveria ser fácil mas tentei de varias formas, tenho um menu em menu.php, onde passo o mouse e desse um sub menu e click abre uma modal com um formulario segue exemplo do codigo. <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> <h2 id="modalTitle">Upload Arquivo FAQ.</h2> <form action="admin/uploadFaq.php" method="post" name="form_up" id="form_up" enctype="multipart/form-data"> <table> <td> <h4>Importar arquivo </h4> <div class='input-file'> <div class="in-file">Selecione um arquivo</div> <input name="fileFaq" id='input-file' type='file' accept=".pdf" /> </div> </td> <td> <button class="btn btn-green box" name="enviar" id="enviar">Enviar</button> </td> </table> </form> <a class="close-reveal-modal" aria-label="Close">&#215;</a> </div> ai o codigo em uploadfaq.php esta assim if (isset($_FILES['fileFaq']['name']) and !empty($_FILES['fileFaq']['name'])) { $diretorio = ""; $nome_Upload_Faq = 'FAQ_PED.pdf'; #recebe o endereço onde o qrquivo esta localizado $arquivo_temp = $_FILES['fileFaq']['tmp_name']; #recebe o nome do arquivo $nome_arquivo = $_FILES['fileFaq']['name']; #busca a ultima ocorrencia da estring no caso o "." e depois converte tudo para minusculo //$ext = strtolower(strrchr($nome_arquivo, '.')); copy($arquivo_temp, $diretorio.$nome_Upload_Faq); header('Location: ../principal.php'); /* if (copy($arquivo_temp, $diretorio.$nome_Upload_Faq)) { #redireciona para a pagina principal header('Location: ../principal.php'); echo '<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> <h2 id="modalTitle">Tudo OK!</h2> <td> <h4>Arquivo enviado com Sucesso!! </h4> </td> <a class="close-reveal-modal" aria-label="Close">&#215;</a> </div>'; }else { #redireciona para a pagina principal header('Location: ../principal.php'); } */ } ao enviar ele simplesmente redireciona, como mostra o código acima já fiz para ele primeiro exibir mensagem depois redirecionar, depois tentei para redirecionar para depois exibir a mensagem, mas percerbi que nesse arquivo isso não da para acontecer e tenho que fazer no próprio arquivo menu, ja coloquei esse codigo la mas nao funcionar, ja tentei também alguma coisa com javascrip mas não deu, não quero aquele aviso do javascript mas um avio com outra janela modal apos ser recarregado a pagina. ja tentei assim tambem <!doctype html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../zurb/foundation5.5.3/css/foundation.css"> <script src="../zurb/foundation5.5.3/js/foundation/foundation.dropdown.js"></script> <title></title> </head> <body> <?php /** * Created by PhpStorm. * User: jwaquim * Date: 26/01/2018 * Time: 11:27 */ if (isset($_FILES['fileFaq']['name']) and !empty($_FILES['fileFaq']['name'])) { $diretorio = ""; $nome_Upload_Faq = 'FAQ_PED.pdf'; #recebe o endereço onde o qrquivo esta localizado $arquivo_temp = $_FILES['fileFaq']['tmp_name']; #recebe o nome do arquivo $nome_arquivo = $_FILES['fileFaq']['name']; #busca a ultima ocorrencia da estring no caso o "." e depois converte tudo para minusculo //$ext = strtolower(strrchr($nome_arquivo, '.')); copy($arquivo_temp, $diretorio.$nome_Upload_Faq); echo '<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> <h2 id="modalTitle">Tudo OK!</h2> <td> <h4>Arquivo enviado com Sucesso!! </h4> </td> <a class="close-reveal-modal" aria-label="Close">&#215;</a> </div>'; // header('Location: ../principal.php'); /* if (copy($arquivo_temp, $diretorio.$nome_Upload_Faq)) { #redireciona para a pagina principal header('Location: ../principal.php'); echo '<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog"> <h2 id="modalTitle">Tudo OK!</h2> <td> <h4>Arquivo enviado com Sucesso!! </h4> </td> <a class="close-reveal-modal" aria-label="Close">&#215;</a> </div>'; }else { #redireciona para a pagina principal header('Location: ../principal.php'); } */ }?> </body> </html> ai fica em tela branca sem exibir mensagem o menu.php sempre e linkado com o principal php por isso o menu.php nao aprece na url, ai no uploadfaq.php depois dessa mudança fica na tela branca, que posso fazer? tentei de varias formas possiveis segue imagem para enviar funciona normal para exibir a mensagem personalizada em moal é o que não estou conseguindo fazer!! desde já agradeço.
  20. julio25frantz

    Abrir modal de acordo com valor da variável.

    Olá pessoal, tudo bem com vocês? Estou com dificuldades em chamar uma modal do Bootstrap, pois bem, eu tenho uma página de login, onde outra página, chamada valida que processa esse login, quando o login estiver incorreto, eu seto a varíavel $_SESSION['retorno']; para 1. E la na página de login eu tenho uma condição if que testa o valor dessa varíavel, eu gostaria que se ela fosse setada, abrisse um modal do boostrap, como faço para chama-la?
  21. Carlos_e!3

    [RESOLVIDO] MEU MODAL tá BUGADO

    GALERA, meu modal está aparecendo com uma janela branca atrás. Peguei esse código da internet e não achei erros, podem me ajudar? <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">Título da mensagem</h4> </div> <div class="modal-body"> <p>Conteúdo da mensagem</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> </div> </div> </div> </div>
  22. Luccas Gaulia

    Modal do Bootstrap não funciona

    Ola Pessoal, Com botão ele funciona, automaticamente não... <!DOCTYPE html> <html lang="en"> <head> <title>Administracion Hotel City Express</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Google fonts --> <link href='https://fonts.googleapis.com/css?family=Graduate|Pacifico' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet" type="text/css"/> <link href="css/menu.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script> <script src="js/validacao.js" type="text/javascript"></script> <link href="../favicon.ico" rel="shortcut icon"> <script type="text/javascript"> $(document).ready(function() { $('#myModal').modal('show'); }); </script> </head> <body> <div class="container"> <div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static"> <div class="modal-dialog modal-sm"> <div class="modal-content se-center"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="window.location.href='index.php?page=equipList';"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p></p><div class="se-alert-success"> <i class="fa fa-thumbs-o-up fa-3x"></i> </div> <div class="alert alert-success"> Enmienda Efectuada con éxito </div> <p></p> </div></div> </div> </div> </div> </body> </html>
  23. Worn

    Poupup

    Olá amigos estou quebrando a cabeça pra fazer um poupup MODAL para por no meu site já tentei de diversas formas e não encontro um jeito de fazer é basicamente o seguinte a proposta quero que assim que iniciar o site vai abrir uma IMAGEM no caso propaganda e teria um X na imagem aonde a pessoa iria clicar e a imagem desaparecia porém não vai de forma alguma, encontrei alguns modelo na internet porém ele não é da forma que faz minha necessidade a pessoa tem que clicar para aparecer tipo um show/hiden queria algo automático
  24. Eduardo Merico

    Controlar Modal entre EXEs

    Pessoal, Tenho a seguinte situaçao, meu projeto estourou o tamanho no VB (12mb) e com isto, tive que dividir o projeto em 2 exes. Tenho agora, um problema de controlar abertura de telas (modal), pois tenho uma tela "pai" no qual chama uma outra tela "filha", mas esta está em outro exe e clicando "fora" da tela, o perco o foco e esta tela (exe) vai pra trás. 1. Alguém sabe se tem como evitar este estouro do projeto? 2. Se não tiver solução, alguém sabe como posso controlar a chamada destas telas. Obrigado!
  25. Jhess

    Formulário com Modal - FECHADO

    Favor excluir este post.
×

Important Information

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