Jump to content
AlexandrePrezzi

Abrir modal que está em outro arquivo

Recommended Posts

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".

Share this post


Link to post
Share on other sites

Fiz um teste colocando somente o modal no arquivo .... e mesmo assim nao funcionou... 

 

A tela fica cinza (como se fosse abrir o modal) ... mas o modal nao abre.

 

Fiz um "alert(data)"  e no alert aparece o código do "modal" .....

 

Sabe me dizer o q pode acontecer ?

Share this post


Link to post
Share on other sites

você se refere a este trecho?

$('.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');
                     }
                     });    
                });

Neste alerta aparece o conteúdo do modal? Caso sim, você precisa dar um append, dentro do success.

alert(data); 

$('body').append(data); // você pode substituir o body pela div onde o conteúdo deve ser carregado.

$('#myModalDadosBasicos').modal('show');

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alan Arnese
      Bom dia pessoal
       
      Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers.

      Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês
       
      Segue abaixo os códigos
      Index.html
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <input type="radio" name="r" id="r4"> <input type="radio" name="r" id="r5"> <div class="slide s1"> <a href="#"> <img src="1.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="2.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="3.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="4.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="5.jpg" alt=""></a> </div> </div> <div class="navigation"> <label for="r1" class="bar active"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> <label for="r4" class="bar"></label> <label for="r5" class="bar"></label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click', 'label', function() { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>  style.css
       
      *{ margin: 0px; padding: 0px;} .slidershow{ width: 100%; height: 100%; overflow: hidden; position: absolute; max-height: 70%; } .middle{ position: absolute; } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 60px; height: 5px; background-color: #c1c0c0; margin: 6px; cursor: pointer; transition: 0.4s; } .bar:hover{ background: #ddcf19; } .bar.active{ background: #ddcf19; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide a{ display: block; width: 100%; height: 100%; cursor: pointer;} .slide img{ width: 100%; height: 100%; object-fit: cover; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } #r4:checked ~ .s1{ margin-left: -60%; } #r5:checked ~ .s1{ margin-left: -80%; } Basicamente quero como o link abaixo mas vinculando meus controles de navegação
       
      Exemplo
    • By RodrigoWD3
      Boa tarde pessoal nao sei se estou no tópico correto , gostaria de tira uma duvida quero fazer um sistema de noticias com url amigavel  em codeigniter ja fiz a parte de noticias para exibir e a view porem estou usando a id para exibir as noticias e o que eu gostaria de fazer era usar a url do titulo da noticia ficando uma url amigavel alguém teria algum tutorial para eu poder estudar obrigado
    • By Alan Arnese
      Bom dia pessoal
       
      Estou estruturando um slideshow puro em css3 + html mas percebi que vou precisar de jquery para algumas funções, eu vinculei radios com lables para a navegação do menu e consegui montar em jquery o efeito "active" para quando é clicado em um botão, tudo funcionando perfeitamente e responsivamente nos browsers.

      Só que agora eu preciso que os slides passem automaticamente e vinculados a navegação, trocando ambos da direta pra esquerda, mantendo o efeito "active" na navegação com harmonia com as imagens, todos os exemplos que saí atrás na internet não vinculam radios com lables para navegação, então isso está me causando uma dificuldade além do que esperava, desde já agradeço a ajuda de vocês
       
      Segue abaixo os códigos
      Index.html
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slidershow middle"> <div class="slides"> <input type="radio" name="r" id="r1" checked> <input type="radio" name="r" id="r2"> <input type="radio" name="r" id="r3"> <input type="radio" name="r" id="r4"> <input type="radio" name="r" id="r5"> <div class="slide s1"> <a href="#"> <img src="1.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="2.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="3.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="4.jpg" alt=""></a> </div> <div class="slide"> <a href="#"><img src="5.jpg" alt=""></a> </div> </div> <div class="navigation"> <label for="r1" class="bar active"></label> <label for="r2" class="bar"></label> <label for="r3" class="bar"></label> <label for="r4" class="bar"></label> <label for="r5" class="bar"></label> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script type="text/javascript"> $(document).on('click', 'label', function() { $(this).addClass('active').siblings().removeClass('active') }) </script> </body> </html>  style.css
       
      *{ margin: 0px; padding: 0px;} .slidershow{ width: 100%; height: 100%; overflow: hidden; position: absolute; max-height: 70%; } .middle{ position: absolute; } .navigation{ position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; } .bar{ width: 60px; height: 5px; background-color: #c1c0c0; margin: 6px; cursor: pointer; transition: 0.4s; } .bar:hover{ background: #ddcf19; } .bar.active{ background: #ddcf19; } input[name="r"]{ position: absolute; visibility: hidden; } .slides{ width: 500%; height: 100%; display: flex; } .slide{ width: 20%; transition: 0.6s; } .slide a{ display: block; width: 100%; height: 100%; cursor: pointer;} .slide img{ width: 100%; height: 100%; object-fit: cover; } #r1:checked ~ .s1{ margin-left: 0; } #r2:checked ~ .s1{ margin-left: -20%; } #r3:checked ~ .s1{ margin-left: -40%; } #r4:checked ~ .s1{ margin-left: -60%; } #r5:checked ~ .s1{ margin-left: -80%; } Basicamente quero como o link abaixo mas vinculando meus controles de navegação
       
      Exemplo
    • By yale03
      Ola eu estou com umas idéias e gostaria de saber como funciona um sistema de pagamento de boleto online. Por exemplo um site que você insira o código de barras e ele faça o pagamento do boleto online, tudo isso automatizado. Para entender melhor, o usuário entraria no site e digitaria o código de barras do boleto e outras informações necessárias, após isso ele iria fazer o pagamento pelo cartão de crédito ou alguma transferência (Sugestão de api do mercado pago ou pagseguro) após confirmação do pagamento o boleto seria pago automaticamente e enviado o comprovante pelo e-mail. Eu não tenho muita noção se existe algum ferramente que auxilie isso e nem por onde começa para desenvolver tal sistema. Alguém poderia me dar uma luz? Se alguém não entender eu explico novamente, mas basicamente é isso mesmo você pagar um boleto sem precisar ir na lotérica por meio de cartão de crédito/débito ou transferência.
      Um exemplo de site que encontrei foi esse: https://paguecombitcoin.com/pagar-boleto-com-bitcoin Porém ao invés de pagar com bitcoins seria com Reais.
    • By juh2425
      Boa noite pessoal
      estou com um dificuldade em como faço uma validação de data atual no caso não pode ser permitido data maior que a data atual do dia ja fiz da data em branco alguem poderia de auxilar:
       
       <script>
                  $("#btn__Gravar").click(function () {
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Selecionar o tipo do movimento");
                          return false;
                      }
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Selecionar a categoria do movimento");
                          return false;
                      }
                      if ($("#tipo_movimento").val().trim() == "") {
                          alert("Prencher o campo data movimento");
                          return false;
                      }
                      if ($("#valor_movimento").val().trim() == "") {
                          alert("Prencher o campo data movimento");
                          return false;
                      }
                  })
              </script>
×

Important Information

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