1

Guys i have an issue with jQuery Fancybox only in one particular page. When pressed ESC, the popup doesn't close. It happens only on one page. Rest of the pages where it has been used, works fine. It has been used like this everywhere

<a href="#newpopupcontainer" id="modalpopup" class="modalpopup">Link Name</a>

<div style="display:none;">
   <div id="newpopupcontainer" class="newpopupcontainer">
      Content                           
   </div>
</div>

<script>
$(document).ready(function () {
    $("a.modalpopup").fancybox({
        'titlePosition': 'inside',
        'transitionIn': 'none',
        'transitionOut': 'none'            
    });
});
</script>

<script type="text/javascript" src="~/Scripts/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/css/jquery.fancybox-1.3.4.css" media="screen" />

Coming to the jQuery version, 1.11.0 is being used. This happens only in one particular page. In all the other pages, popup closes when pressed ESC. Any idea what could be the possible cause?

Sagar Raj
  • 909
  • 3
  • 14
  • 34

1 Answers1

0

Older Fancybox versions are not compatible with the newest versions of jquery. A solution is to upgrade to Fancybox 2.1.5, and update a small piece of code:

Change $("a.modalpopup").fancybox({ to $("#modalpopup").fancybox({.

Here is a working fiddle: https://jsfiddle.net/vojyzcdb/

Edit 1:

To include the newest version of Fancybox, you will need jquery.fancybox.min.css and jquery.fancybox.pack.js. Those two files can be included like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

The code in your editted start post should work fine after this change.