Superposición de una página html en otra

I want to overlay an html page on another page. I tried giving link to other page in div as given in the following page: http://jquerytools.org/demos/overlay/external.html

but the control moves to the other page instead of staying on the same page. can anyone suggest an example wherein a new html page loads on top of the main one.. i am new to web please help!

preguntado el 27 de noviembre de 13 a las 07:11

How does the first link illustrate what you're asking about? You mean the modal windows/ lightboxes? -

if you click on view details, then a separate html page should load on top of the main page. -

This is quite a large task and has many, many different options how to do it. What specifics do you have? Does it have to be a .html file? Can you use an iframe? What about ajax? Do you have a favourite lightbox/jquery plugin for this that you want to use? Regarding the juqerytools link you gave, what code did you try that failed? -

create a div with z-index higher than the other elements in the page and embedd an iframe in it with sin costura and load another page in that iframe stackoverflow.com/a/20015831/1642219 -

I've tried the code in the second link. i provided a separate background image. i even tried the over-apple.css and then override it with their css. but the control goes to the other html page instead of staying on the same page and overlaying. an answer on the same basis would be nice - html,css,jquery -

2 Respuestas

DEMO

i have used an iframe to load another page (because of security issues browser will not allow external domain to load in an iframe/div, depending on the external domain owner's configuration), you can use a div to do the same using jquery's load if you are fetching page from same domain

$('div#page').load(source,function(e){$(this).fadeIn('slow')})

NOTA that given demo is not a generic/universal solution you have to tailor the css part according to your pages

respondido 27 nov., 13:14

using only generic html, you can't do what you are asking for. what you need to do, theoretically, is to load the html page to an existing div and then switch between the current div to the next pages div with some kind of animation.

after explaining the basic task, i will tell you that what you are looking for is a JavaScript html templating system (like handlebars) and than you could just switch between templates. using javascript templating will require some good knowledge with javascript as it will just be the beginning. you will also need to implement a js router in order to switch pages easily and so on. what you will be creating is a SPA (single page application).

i would recommend you to read more about Single Page Applications, it should sort thing out (just google for "building single page apps").

respondido 27 nov., 13:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.