-2

I have a web page on which an anchor tag <a href="other-page.php"> links to another page.

I want this other-page.php appear like a pop-up on the page which contains the aforementioned <a> tag.

Is it possible using CSS and/or JQuery?

If yes, what is the general idea? How to do it?

Solace
  • 8,612
  • 22
  • 95
  • 183
  • 2
    Yes, it is possible. There are a lot of ways to do it. I'm assuming you just want to call the HTML from the other page and have it load in a DIV that is shown like a popup? Please provide some amount of code of what you have tried. – Twisty Dec 17 '15 at 01:03
  • 1
    Have a look at this answer... http://stackoverflow.com/a/1328731/4322803 – Quantumplate Dec 17 '15 at 01:04
  • 1
    @Quantumplate JQuery UI would be a bit bloated for just one link. It will do the job of making a dialog box. – Twisty Dec 17 '15 at 01:05
  • 1
    it is called a Modal Popup... check this example: http://getbootstrap.com/javascript/#modals – balexandre Dec 17 '15 at 01:11
  • @Twisty Haven't written an code yet, I didn't even know if it is possible. I searched on the web with terms like "popup using css" etc. but none of the results was loading a new page in a popup. So I was half thinking that it is not possible. Now I'll search for modal windows – Solace Dec 17 '15 at 01:15
  • 1
    Possible duplicate of [Jquery dialog to open another page](http://stackoverflow.com/questions/2756283/jquery-dialog-to-open-another-page) – Sheepy Dec 17 '15 at 05:45

2 Answers2

3

If you want the link to open up a new browser window, you need the 'target' attribute on the anchor tag, like this: <a href="other-page.php" target="_blank">

If you don't want a full browser window, just a pop-out window with an 'x' close tab, you're looking for a "modal" window. There are modal jquery libraries that will do that. Check out simplemodal. That's just one of many libraries, but now you have a search term.

femmestem
  • 591
  • 2
  • 9
1

You have 2 choices:

- The firstone is act like that, just 1 page, put all the content in just 1 html. Put display: none; to all the other divs(all what you don't want show to the user) and then via JS change the visibility via 

$('div').show;
/* or*/
 $('div').hide;

- The secondone: is display:none or visibility:hidden to a global div (within all the page content) in visibility: hidden, or display:none and change it via:

$(document).ready(function(){
 $(divToShow).show('slow');
/* or */
 $(divToShow).slideup('slow');
/* or some effect */
});

The lastone it make a modal but depend the content It's non-viable

Hope I helped,

Victor Ribero Guasch
  • 347
  • 1
  • 6
  • 15