[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

How to put Close button on iframe.

How can i put on close button.
          
                         <div id="iFrameContainer" style="z-index:+1; position:absolute;left:480px; top:125px; display:none;" onmouseout="this.style.display='none'">
                          <iframe src="#" id="myFrame" width="400" height="500" frameborder="1" scrolling="auto" style="border:10">
       
         </iframe>
                        </div>

Kindly suggest.And how to fire this.style.display='none' on its click.
0
searchsanjaysharma
Asked:
searchsanjaysharma
1 Solution
 
suvmitraCommented:
A Sample copuld be:

--mydiv.htm--
<script>
function hideIFrame()
{
document.getElementById("mydiv").style.display = "none";
}
</script>

<div id='mydiv'>
<iframe src='myiframe.htm'>

</iframe>
</div>

--myiframe.htm--
<script>
function AskParentToHideMe()
{
if (typeof(parent.hideIFrame)=='function') parent.hideIFrame();
}
</script>
<input type='button' value='Hide This IFrame'
onclick=AskParentToHideMe();">
0
 
selvolCommented:
Download jquery
http://jqueryui.com/download

Open the folder check it out.

See remove class in the developement folder for this part of the question
"Kindly suggest.And how to fire this.style.display='none' on its click."

Selvol
0
 
GwynforWebCommented:
This works

<div id="myDiv">
   <IFRAME src="myIframe.htm"></IFRAME>
   <input type="button" value="Hide Iframe" onclick="document.getElementById('myDiv').style.display='none'">
</div>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
searchsanjaysharmaAuthor Commented:
Ref link is :
http://www.indiannursingcouncil.org/gfatm/testcharts/home.aspx

here there is a map and links are  there. When i click on any link. Frame gets opened.
But it goes off on mouseout.
I want the close button on frame, which get hide on its click,

This is the code for .aspx.

  <div id="iFrameContainer" style="z-index:+1; position:absolute;left:480px; top:125px; display:none;" onmouseout="this.style.display='none'">
                          <iframe src="#" id="myFrame" width="400" height="500" frameborder="1" scrolling="auto" style="border:10">
       
         </iframe>
                        </div>
                     
                       
                        <div><img src="images/india_map3.jpg" width="563" height="653" border="0" usemap="#Map">
                          <map name="Map" id="Map">
                          <area shape="rect" coords="492,251,532,263" id="e3" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details"  href="#"/>
                          <area shape="rect" coords="315,280,362,291" id="e6" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details"  href="#"/>
                          <area shape="rect" coords="371,288,426,300" id="e7" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details"  href="#"/>
                         
                          <area shape="rect" coords="428,273,461,283" id="e8" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="173,103,247,114" id="n1" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="215,148,269,157" id="n4" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="138,128,167,138" id="n5" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="179,133,229,143" id="n6" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="143,51,219,64" id="n7" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="138,167,174,178" id="n8" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="187,177,239,188" id="n9" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="222,211,281,222" id="n10" onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="323,235,354,246" id="n11"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="383,186,412,196" id="ne1"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" />
                          <area shape="rect" coords="511,220,553,230" id="ne2"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" />
                          <area shape="rect" coords="464,217,495,227" id="ne3"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="426,242,474,253" id="ne4"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="467,176,546,188" id="ne5"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="251,330,310,342" id="s2"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="304,350,336,362" id="s7"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="477,282,518,293" id="s9"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="230,532,280,544" id="s12"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="113,470,164,483" id="s13"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="169,553,221,567" id="s14"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />  
                          <area shape="rect" coords="187,423,257,435" id="s16"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="76,453,101,464" id="s17"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="123,555,155,567" id="s18"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="96,217,145,229" id="w1"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="50,288,86,300" id="w2"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          <area shape="rect" coords="112,366,168,379" id="w11"  onclick ="JavaScript:DoSomething(this.id);"title="Click For Details" href="#" />
                          <area shape="rect" coords="167,288,239,302" id="w12"  onclick ="JavaScript:DoSomething(this.id);" title="Click For Details" href="#" />
                          </map>
                        </div>


code of function is

<script type="text/javascript" language="javascript">
        function DoSomething(id)
        {
            var popup = document.getElementById("iFrameContainer");
            var frame = document.getElementById("myFrame");
            if (popup != null && frame != null)
            {
                frame.src = "StateDetails.aspx?Id=" + id;
                popup.style.display= "block";
               
            }
        }
     
     
    </script>
0
 
BuggyCoderCommented:
Here is jquery code to help you with, here i am using hover method of jquery to define the generic hover functionality:-

document.ready(function()
{
$('#iFrameContainer').hover(
function()
{
$('#myFrame').show()
},
function()
{
$('#myFrame').hide()
}
)

Open in new window


here is the api reference:-
http://api.jquery.com/hover/
0
 
Easwaran ParamasivamCommented:
Why could you not use window.open method instead of using iFrame in this case? In window.open the close button (X) will be there. If you want you can have in your ASPX page as well. On click event of the close button you could call just window.close().

window.ShowModalDialog() is another option as well.
0
 
searchsanjaysharmaAuthor Commented:
ok
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now