Is there a way to open an HTML page within a modal? How?

Asked

Viewed 868 times

5

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 that modal, how can I do that?

html angularjs modal

  • I do not know if it is the right thing to do, but the inclusion of an iframe within that modal could be a solution.

  • could exemplify with a code ?

  • It’s unclear if you really want to open another page or if you want to load some specific content dynamically...because if so just use some ajax in jquery or even some other Angular resource, which I’m not aware of yet.

  • This html page that will load pulls data from the database?

  • yes, it’s a registration and consultation form

2 answers

1

Marconi gave the solution of using iframe, which is not very recommended (is that actually, depends on the application, if it is only this modal and is simple thing has no problem, but imagine Facebook for example, or any system in reality...) Another solution is to make an Ajax request, here 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 made for a project and it’s very easy to use, name of variables:

modalPage: The address of the page to be loaded into the modal.

modalBox: Is the id of the modal being loaded, then you can load in several modals on the page, you adapt to your ai.

button: This is the button that opens the modal, I disable it so the person does not click twice.

Well, just adapt to your code there, tidy the addresses, ids and classes according to yours! I hope you helped!

0

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>

Browser other questions tagged html angularjs modal

You are not signed in. Login or sign up in order to post.