Question

I have a web page with several links inside a table. One of the links is inside a td tag . I want a way to invoke an iframe, which will be opened once the user clicks on the link. When the iframe pops up the rest of the page will become un responsive and once the user comes out of the iframe the the outer page becomes responsive. The table td is something is like this :

<td >
<a href="configuration.xml related jsp action">Set the Iframe up</a>
</td>

The iframe will be populated by the contents of another jsp .

EDIT : I was in a hurry, so forgot to paste the code that i tried : So here it is :

<td >
<a href="#">Set the Iframe up</a>
<div id="modalMan" style="display:none;">
<div class="modalsub" >
<p class="close"><a href="#"><img src="cbutton.gif" alt="Close"/></a></p>
<iframe id="myFrame" style="display:none;" height="430" width="675" 
src="myJSP.jsp" >
</iframe>
</div>
</div>
</td>

This however is creating a problem as close icon is not coming and the part of the div i.e.

   <div id ="modalman">
   <p class>
   <iframe src>

All remain hidden and an iframe opens with similar look, but the functionalities are all scrambled up, the javascript contents of myjsp remain hidden .

EDIT AGAIN : I am very sorry i forgot to mention that i have tried the onclick functionality, but since my href is like this so it goes and opens the jsp directly in a new browser tab instaed of opening it in an iframe.

 <a href="configuration.xml related jsp action">Set the Iframe up</a>

How can i achieve this ? Kindly suggest a way .

Answer 1

Heres a very basic JavaScript function that can do it. Function parameters are the element in which you want the iFrame to be appended to and the location in which you want it to point.

HTML

<a href="#" onclick="setIframe(this,'http://www.stackoverflow.co.uk')" >Set the Iframe up</a>

JavaScript

function setIframe(element,location){
    var theIframe = document.createElement("iframe");
    theIframe.src = location;
   element.appendChild(theIframe);
}