5

Tenho o seguinte código que abre uma modal:

<div class="uk-modal" id="new_task">
    <div class="uk-modal-dialog">
        <div class="uk-modal-header">
            <h3 class="uk-modal-title">{{ newTask.name }}</h3>
        </div>
        <form class="uk-form-stacked">

        </form>
    </div>
</div>

Porém eu quero abrir uma outra pagina .html dentro desse modal, como posso fazer isso?

5
  • Não sei se é o mais correcto, mas a inclusão de um iframe dentro dessa modal poderia ser uma solução. Commented 4/10/2016 às 10:33
  • poderia exemplificar com um codigo ? Commented 4/10/2016 às 10:38
  • Não está claro se você realmente quer abrir uma outra página ou se quer carregar algum conteúdo específico dinamicamente...pois se for o caso basta utilizar algum ajax no jquery ou até mesmo algum outro recurso do Angular, cujo não tenho conhecimento ainda. Commented 4/10/2016 às 12:24
  • Essa página em html que vai carregar puxa dados do banco?
    – Bia
    Commented 4/10/2016 às 12:32
  • sim, é um formulario de cadastro e consulta Commented 3/11/2016 às 21:42

2 Respostas 2

1

O Marconi deu a solução de usar iframe, que não é muito recomendado (é que na verdade, depende da aplicação, se for só esse modal e for coisa simples não tem problema, mas imagina o Facebook por exemplo, ou qualquer sistema na realidade...) Outra solução é fazer um requisição Ajax, eis com JQuery:

//Open Modal
function loadModal(modalPage, modalBox, button){
    $.ajax({
        url: "/modals/" + modalPage,
        async: true,
        success: function(data){
            $("#" + modalBox + " .modal-body").html(data);  
            button.removeAttribute("onclick");  
        },
        beforeSend: function(){
            $("#" + modalBox + " .modal-body").html("<img src='/images/loading.gif'> Carregando...");
        },
        error: function(){
            $("#" + modalBox + " .modal-body").html("Ocorreu uma erro!");
        }
    });
}

Essa é uma função que fiz para um projeto e é bem fácil de usar, nome das variáveis:

modalPage: O endereço da página a ser carregada para dentro do modal.

modalBox: É o id do modal que está sendo carregado, então dá para carregar em diversos modais na página, você adapta ao seu ai.

button: Esse é o botão que abre o modal, eu desativo ele para a pessoa não clicar duas vezes.

Bom, é só adaptar ao seu código ai, arruma os endereços, ids e classes de acordo com o seu! Espero que tenha ajudado!

0

Penso que esta não é a melhor solução, mas cá vai. No entanto aconselho você a pesquisar por uma solução usando jQuery

<iframe src="http://www.w3schools.com/">
        
         <p>Your browser does not support iframes.</p>
 </iframe>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .