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 58 results

  1. 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>
  2. 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".
  3. 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>; } }
  4. 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.
  5. 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?
  6. 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 -->
  7. 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.
  8. 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)
  9. 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.
  10. 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?
  11. 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.
  12. 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?
  13. 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.
  14. 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?
  15. 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>
  16. 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>
  17. 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
  18. 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!
  19. Jhess

    Formulário com Modal - FECHADO

    Favor excluir este post.
  20. Jhess

    Formulário com Modal

    Olá pessoal, eu tenho um form: <form id="resp_form" method="POST" action="functions/update.php" enctype="multipart/form-data"> <?php if ($res=$mysqli->query($queryResult)) { if($res) { while($row = mysqli_fetch_array($res)): ?> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Área</h3> </div> <div class="panel-body"> <div class="form-group"> <div> <table> <tr><td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="0" id="<?php echo $row['cod_area']."0"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."0"; ?>" class="css-label radGroup2">0</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="1" id="<?php echo $row['cod_area']."1"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."1"; ?>" class="css-label radGroup2">1</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="2" id="<?php echo $row['cod_area']."2"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."2"; ?>" class="css-label radGroup2">2</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="3" id="<?php echo $row['cod_area']."3"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."3"; ?>" class="css-label radGroup2">3</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="4" id="<?php echo $row['cod_area']."4"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."4"; ?>" class="css-label radGroup2">4</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="5" id="<?php echo $row['cod_area']."5"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."5"; ?>" class="css-label radGroup2">5</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="6" id="<?php echo $row['cod_area']."6"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."6"; ?>" class="css-label radGroup2">6</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="7" id="<?php echo $row['cod_area']."7"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."7"; ?>" class="css-label radGroup2">7</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="8" id="<?php echo $row['cod_area']."8"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."8"; ?>" class="css-label radGroup2">8</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="9" id="<?php echo $row['cod_area']."9"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."9"; ?>" class="css-label radGroup2">9</label> </td> <td> <input type="radio" name="<?php echo $row['cod_area']; ?>" value="10" id="<?php echo $row['cod_area']."10"; ?>" class="css-checkbox"/ required> <label for="<?php echo $row['cod_area']."10"; ?>" class="css-label radGroup2">10</label> </td> </tr> </table> </div> <br> </div> </div> </div> <?php endwhile;}}?> <input type="hidden" name="id_pergunta" value="<?php echo $id_pergunta?>"> <?php if (!isset($_POST['id_pergunta'])) { ?> <div class="jumbotron"> <h1>Erro 404!</h1> <p>Infelizmente não encontramos o que você procura, tente em outro lugar, quem sabe.</p> <a class="btn btn-info btn-lg" onClick="history.go(-1)" role="button">Voltar <span class="glyphicon glyphicon-arrow-left"></span> </a> <a class="btn btn-info btn-lg" href="index.php" role="button">Início <span class="glyphicon glyphicon-home"></span> </a> </div> <?php } else { ?> <button type="submit" href="#modal-dialog" data-toggle="modal" class="btn btn-success">Confirmar <span class="glyphicon glyphicon-ok"></span> </button> <a href="index.php" class="btn btn-danger" role="button">Cancelar <span class="glyphicon glyphicon-remove"></span> </a> <?php }?> </form> E uma página em php para esse formulário postar, functions/update.php Minha cruel dúvida é a seguinte: Como eu faço para quando eu responder este formulário exiba um modal com o botão OK e quando eu clicasse nesse modal, ia para a página functions/update.php postar o meu form?
  21. Eduardo Trindade

    Problema para exibir Modal

    Olá pessoal! Sou novo no fórum e espero estar postando na área correta. Meu problema é o seguinte: Dado uma consulta SQL que me retorna todos os Alunos cadastrados numa biblioteca, preciso criar o Modal para visualizar os dados mais relevantes de cada aluno, que já está sendo exibido corretamente na tabela. Em seguida farei outro Modal para editar. Acontece que ao chamar o Modal para visualizar as informações do aluno, ele simplesmente não abre. Acredito que tenha identificado onde está o erro, mas ainda não consegui resolver. A estrutura que permite visualizar a tabela está da seguinte forma: <?php foreach($alunos as $alunos):?> <tr class="col-form-label"> <td><?=$alunos->status?></td> <td><?=$alunos->matricula?></td> <td><?=$alunos->nome?></td> <td><?=$alunos->datanascimento?></td> <td><?=$alunos->endereco?></td> <td><?=$alunos->telefone?></td> <td><?=$alunos->celular?></td> <td> <button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal<?php echo $alunos->id_alunos;?>">Visualizar</button> <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModal2<?php echo $alunos->id_alunos;?>">Editar</button> <button type="button" class="btn btn-xs btn-danger" data-toggle="modal" data-target="#myModal3<?php echo $alunos->id_alunos;?>">Apagar</button> </td> </tr> Já a chamada do Modal ficou assim: <!-- Inicio Modal --> <div class="modal fade" id="myModal<?php echo $rows_alunos['id_alunos']; ?>" 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 $rows_alunos['nome']; ?></h4> </div> <div class="modal-body"> <p><?php echo $rows_alunos['id_alunos']; ?></p> <p><?php echo $rows_alunos['nome']; ?></p> <p><?php echo $rows_alunos['matricula']; ?></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Sair</button> </div> </div> </div> </div> <!-- Fim Modal --> Acontece que, se eu retirar os trechos do PHP <?php echo $alunos->id_alunos;?> após o data-target="myModal no primeiro botão e <?php echo $rows_alunos['id_alunos']; ?> na primeira linha do início do Modal, ele abre, mas sem funcionalidade, com os erros do modal-body. Porém, do jeito que está, não abre. Não sei onde estou declarando algo errado, e agradeço imensamente quem puder me orientar nesta situação.
  22. Galera estou fazendo um sistema em ajax/jquery... com modal... está enviando normal e update tbm..... Porém quando aperto em editar gostaria que as inputs viessem com os dados que já estão no banco para ficar mais fácil de editar... como faço isso? Tentei varias formas mas não consigo acertar o script ajax com o arquivo php... obs: o mesmo modal de enviar é o do update Index.php <!DOCTYPE html> <html> <head> <title>Ajax</title> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css"> <link href="CodeSeven-toastr/css/toastr.css" rel="stylesheet" type="text/css" /> </head> <body> <br /><br /> <div class="container"> <div align="right"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" id="btn_add" data-toggle="modal"> Add </button> </div> <div class="row"> <div id="select"></div> </div> </div> </body> </html> <!-- Modal --> <div class="modal fade" id="modal" 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" id="myModalLabel"></h4> </div> <div class="modal-body"> <form id="form" method="post" enctype="multipart/form-data"> <p><label>Titulo</label> <input type="text" name="titulo" id="titulo" /></p><br /> <p><label>Subtitulo</label> <input type="text" name="subtitulo" id="subtitulo" /></p><br /> <p><label>Select Image</label> <input type="file" name="image" id="image" /> </p><br /> <input type="hidden" name="action" id="action" /> <input type="hidden" name="id" id="data_id" /> </div> <div class="modal-footer"> <button type="submit" id="enviar" class="btn btn-success"><i class="fa fa-tags"></i>Vai dar certo</button> </form> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> <script src="jQuery/jquery-3.2.1.js"></script> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> <script src="CodeSeven-toastr/js/toastr.js"></script> <script src="CodeSeven-toastr/custom-alert.js"></script> <script type="text/javascript"> $(document).ready(function(){ show_data(); function show_data(){ var $select = "select"; $.ajax({ url:"_appadmin/ajax/bannerModel.php", method:"POST", data:{action:$select}, success:function(data){ $('#select').html(data); } }) } $('#btn_add').click(function(){ $('#modal').modal('show'); $('.modal-title').text("haaaaaaaaaaaa"); $('#form')[0].reset(); $('#data_id').val(''); $('#action').val('insert'); }); //VALIDAÇÕES PARA LARGURA E ALTURA DA IMAGEM var _URL = window.URL || window.webkitURL; $("#image").change(function (e) { var $ext = $('#image').val().split('.').pop().toLowerCase(); var $size = document.getElementById("image").files[0]; var file, img; if ((file = this.files[0])){ img = new Image(); img.onload = function () { if (jQuery.inArray($ext, ['jpg','jpeg','png']) == -1){ $('#image').val(''); toastr["error"]("", "Formato inválido!"); return false; } else if ($size.size > 10485760){ $('#image').val(''); toastr["error"]("", "Imagem muito grande!"); return false; } else if (this.width < 1680 || this.height < 690){ $('#image').val(''); toastr["error"]("Está imagem deve conter pelo menos 1680px por 690px..", ""); return false; } }; img.src = _URL.createObjectURL(file); } }); $('#form').submit(function(event){ event.preventDefault(); var $titulo = $('#titulo').val(); var $subtitulo = $('#subtitulo').val(); var $image = $('#image').val(); //VALIDAÇÕES if ($image == ''){ toastr["error"]("", "Um banner precisa de imagem.. "); return false; } else { $.ajax({ url:"_appadmin/ajax/bannerModel.php", method:"POST", data:new FormData(this), contentType:false, processData:false, success:function(data){ show_data(); toastr["success"](" ", "Adicionado com sucesso!"); $('#form')[0].reset(); $('#modal').modal('hide'); } }); } }); $(document).on('click', '.update', function(){ $('#data_id').val($(this).attr("id")); $('#modal').modal("show"); $('.modal-title').text("EDITAAR"); $('#action').val("update"); }); $(document).on('click', '.delete', function(){ var $id = $(this).attr("id"); var $delet = "delete"; if(confirm("Tem certeza que deseja remover este banner?")){ $.ajax({ url:"_appadmin/ajax/bannerModel.php", method:"POST", data:{id:$id, action:$delet}, success:function(data){ show_data(); toastr["success"](" ", "Removido com sucesso!"); } }) } else { return false; } }); }); </script> PHP <?php include "Connection.class.php"; if(isset($_POST["action"])){ if($_POST["action"] == "select"){ $stmt = $conn->prepare("SELECT * FROM tb_banner ORDER BY id DESC"); $stmt->execute(); while($row = $stmt->fetch()){ print '<div class="col-md-3"> <img src="../uploads/banner/'.$row['_image'].'" class="img-responsive" /> <h4>'.$row["id"].'</h4> <h2>'.$row["_titulo"].'</h2> <h3>'.$row["_subtitulo"].'</h3> <button type="button" name="update" class="btn btn-warning bt-xs update" id="'.$row["id"].'">Editar</button><br> <button type="button" name="delete" class="btn btn-danger bt-xs delete" id="'.$row["id"].'">Remover</button> </div>'; } } if($_POST["action"] == "insert"){ $titulo = $_POST["titulo"]; $subtitulo = $_POST["subtitulo"]; //PEGA A EXTENSÃO DA IMAGEM $tmp = explode('.', $_FILES['image']['name']); $ext = strtolower(end($tmp)); $validas = array('jpeg', 'jpg', 'png'); //RENOMEIA A IMAGEM date_default_timezone_set('America/Sao_Paulo'); $newName = date("His") . date("dmy") . "." . $ext; //PASTA DE DESTINO $destino = "../../../uploads/banner/" . $newName; //VALIDAÇÕES SERVERSIDE if($_FILES['image'] == null){ return false; } else if(!in_array($ext, $validas)){ //se a extensão não for valida return false; } else if ($_FILES['image']['size'] > 10485760){ //se for maior que 10mb permitido return false; } else { //MOVE ELA PARA A PASTA DE DESTINO move_uploaded_file($_FILES['image']['tmp_name'], $destino); } $stmt = $conn->prepare('INSERT INTO tb_banner (_titulo, _subtitulo, _image) VALUES (:titulo, :subtitulo, :image)'); $stmt->bindParam(':titulo', $titulo); $stmt->bindParam(':subtitulo', $subtitulo); $stmt->bindParam(':image', $newName); $stmt->execute(); } if($_POST["action"] == "update"){ $stmt = $conn->prepare("SELECT * FROM tb_banner WHERE id = :id LIMIT 1"); $stmt->execute(array(':id' => $_POST["id"])); $return = array(); $result = $statement->fetchAll(); foreach($result as $row){ $return["titulo"] = $row["_titulo"]; $return["subtitulo"] = $row["_subtitulo"]; } echo $return; } if($_POST["action"] == "delete"){ $stmt = $conn->prepare("SELECT _image FROM tb_banner WHERE id = :id"); $stmt->execute(array(':id' => $_POST["id"])); $name = $stmt->fetch(); unlink("../../../uploads/banner/$name[0]"); $stmt = $conn->prepare("DELETE FROM tb_banner WHERE id = :id"); $stmt->execute(array(':id' => $_POST["id"])); } } ?>
  23. Tenho um botão chamado unidade que ao ser clicado abre uma janela modal com uma tabela contendo Unidade e descrição. Queria que ao invés de apenas a coluna codigo a linha toda fosse selecionável , porém só pode entrar no input dados da coluna codigo <div class="container"> <h2>Modal</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Unidade</button> <input type="text" class="form-control unidade"> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <label class="modal-title">UNIDADE</label> </div> <div class="modal-body"> <table id="get-value"> <?php include ("conn.php"); echo "<table border = 2>"; echo "<tr>"; echo "<th>Unidade</th>"; echo "<th>Descrição</th>"; echo "</tr>"; $result = "SELECT codigo, descricao FROM cadunid"; $resultado = mysqli_query($conn, $result); while ($row = mysqli_fetch_assoc($resultado)){ echo "<tr>"; echo "<td class='get-value'>". $row['codigo'] ."</td>"; echo "<td>". $row['descricao'] ."</td>"; echo "</tr>"; } ?> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button> </div> </div> </div> </div> </div> <script> $(document).on('click', '.get-value', '.get', function() { var value = $(this).text(); $('.close').trigger('click'); $('.unidade').val(value); }); </script>
  24. Ola Pessoal, Preciso fazer um sistema que abre "Modais" durante a navegação no site, informando algumas coisas, janelas no lado direito no canto inferior e outras janelas no lado esquerdo no canto inferior, com tempo de apresentação. Não é modal para "congelar" a tela, são informativos que aparecem durante a navegação.... Alguém têm um exemplo para isso?
  25. Luccas Gaulia

    Modal (detalhes que não consigo fazer)

    Pessoal, fiz esse modal abaixo... funcionando corretamente, está no canto inferior lado esquerdo... Preciso de ajudar para os seguintes detalhes... 1º) O modal não pode "congelar" a tela quando aparece... deveria aparecer sem "congelar"... 3º) ele deveria subir (debaixo para cima) a tela.... não como está... 2º) Preciso colocar um time no index, no qual aparecerá depois de 3 minutos de navegando... Podem me ajudar? Att, index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <title></title> <link rel="icon" type="image/png" href="/SUBIR_ARCHIVO_SERVIDOR:PARA:DAR:LINK:AQUI" /> <link rel="stylesheet" type="text/css" href="modal.css" /> <link href="bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="modal.js"></script> </head> <body> <div class="modal fade" id="meumodal"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">X</span></button> </div> <div class="modal-title"> Texto aqui<br> Texto aqui<br> Texto aqui<br> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <script type="text/javascript"> /** COLOCAR O TIME STAMP AQUI **/ $(document).ready(function() { $("#meumodal").modal("show"); }); </script> </body> </html> modal.css @charset "utf-8"; /* CSS Document */ #meumodal{ top: 70%; left: 90%; } #mask { position:absolute; top: 70%; left: 1%; border-radius: 5px 5px 5px 5px; z-index:9000; background-color:#000; display:none; } #boxes .window { position:absolute; width:280px; height:200px; display:none; z-index:9999; } /* Personalize a janela modal aqui. Você pode adicionar uma imagem de fundo. */ #boxes #dialog { width:280px; height:200px; } /* posiciona o link para fechar a janela */ .close { display:block; text-align:right; font-size: 80%; height: 10px; } modal.js function open_modal( id ){ var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({'width':maskWidth,'height':maskHeight}); $('#mask').fadeIn(10000); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); $(id).fadeIn(2000); }; $(document).ready(function() { $('a[name=modal]').click(function(e) { e.preventDefault(); open_modal( $(this).attr('href') ); }); open_modal( '#dialog' ); $('.window .close').click(function (e) { e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); });
×

Important Information

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