Search code examples
javascriptjqueryhtmlasp.netcolorbox

Jquery Color box popup is not working with Firefox when nested iframe and FrameSet is used

I have used jquery color box pop up and it is working fine with Google chrome but not working with Firefox.

I have 3 pages Default.aspx, Default2.aspx & Default3.aspx

Default3.aspx is nested inside Default2.aspx and Default2.aspx is nested inside Default.aspx.

Complete source code is as follows:

Default.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<frameset rows="50,*" frameborder="NO" border="0">      
    <frame src="Default2.aspx" name="frameCV" marginwidth="0" marginheight="0" 
     scrolling="AUTO" noresize="noresize">
 </frameset>
 </html>

Default2.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title></head>
<body>
    <table style="width:100%">
        <tr>
            <td>
                <iframe src="Default3.aspx" style="width:800px;height:500px; "></iframe>
            </td>
        </tr>
    </table>

</body>
</html>

Default3.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.colorbox.js"></script>
    <script type="text/javascript">
        function fn_openPopUp(url) {
            $.colorbox({ href: url, width: "80%", height: "80%", iframe: true });
        }
    </script>
    <link rel="stylesheet" href="colorbox.css" type="text/css" />
</head>
<body>
    <form>
        <div>
            <img usemap="#P1" style="top:0px;left:0px;position:relative;" src="Reserved.png" border="0" />
            <map name="P1">
                <area tabindex="4" href="javascript:fn_openPopUp('http://dotnetschools.com/')" style="text-decoration:none;" target="_top" shape="poly"
                      coords="237,196,237,265,400,265,400,196" />
            </map>
        </div>
    </form>
</body>
</html>

Now I am browsing Default.aspx from google chrome then it is working fine but not with Firexfox

Solution

  • Colorbox PopUp will be open, when you remove the attribute target="_top" from in Default3.aspx page.

    You can do this:

    $('map area[target="_top"]').removeAttr('target');