Take a <div> from one HTML page and display a popup on another page?

I want to take only one div from one HTML page and display it in a popup on another page.

I only need one div and its contents, and not the rest of the HTML from this page pulled into a popup, so iframes are not suitable.

PAGE-1.HTM:

<body> <div class="one">content</div> <div class="two">content</div> <div class="three">content</div> <body> 

PAGE-2.HTM:

 <a href="">Get Div Two</a> 

So, when I click the “get div two” link on page 2.htm, it only gets div.two from page 1.htm and displays it in a popup on page 2. NTM

+6
source share
3 answers

Using the @pawel suggestion api.jquery.com/load/#loading-page-fragments

I have done this:

 $( ".popup" ).load( "page-1.htm .two" ); 

To populate div.popup on page 2.htm, then show .popup when you click Get Div Two

0
source

Do you mean something like this?

 $("a").on("click", function() { $.get('/PAGE-1.HTM').then(function(responseData) { var $responseData = $(responseData.html); var div = $responseData.find('.two').html(); if (div.length > 0) { $('.your-popup').append(div); } }); }); 
0
source

use this javascript here fiddle this question is well presented here how to pass the div value to window.open?

 function openWin() { var divText = document.getElementById("window").outerHTML; var myWindow = window.open('', '', 'width=200,height=100'); var doc = myWindow.document; doc.open(); doc.write(divText); doc.close(); } 
0
source

All Articles