I have the following code that opens a 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>
But I want to open another page .html within this modal, how can I do that?
Marconi has provided the solution to use iframe, which is not very recommended (it actually depends on the application, if it is just this modal and is simple thing does not have problem, but imagine Facebook for example, or any system actually...) Another solution is to make an Ajax request, that's it with 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!");
}
});
}
This is a function I did for a project and it is very easy to use, name the variables:
modalPage : The page address to load into the modal.
modalBox : It is the id of the modal that is being loaded, so you can load several modalities on the page, you adapt to yours there.
button : This is the button that opens the modal, I disable it for the person not clicking twice.
Well, just adapt to your code there, sort the addresses, ids and classes according to yours! I hope you have helped!
I think this is not the best solution, but here it goes. However I advise you to search for a solution using jQuery
<iframe src="http://www.w3schools.com/">
<p>Your browser does not support iframes.</p>
</iframe>