开发者

Issue with Fancybox in modal mode

开发者 https://www.devze.com 2023-01-28 18:26 出处:网络
Given this link within the FancyBox framework: <a class=\"fancyBox\" href=\"http://localhost/ccms/index.cfm?do=user.update\" id=\"userLink\">Update</a>

Given this link within the FancyBox framework:

<a class="fancyBox" href="http://localhost/ccms/index.cfm?do=user.update" id="userLink">Update</a>

If I click this link physically, The FancyBox modal window pops up and displays the contents of the User Update page. The window is in modal mode and the only way to close the window is via the Close / X. Clicking outside of the modal does nothing. So far开发者_高级运维 so good.

However, if I try and trigger the window like this:

$("#userLink").fancybox().trigger('click');

The User Update page pops up in a modal as required, BUT clicking outside the modal now triggers the close event and the window is closed.

Any ideas why this is happening???

Ultimately what I would like is for the modal's behaviour to be consistent. But if no solution can be found for this, is there not perhaps a way to override the click event causing the modal to close and disable it?

Thanks, anyone?


You need to specify the modal behavior when you call fancybox() like that. You're likely overwriting the settings you provided the other way when you call it in that fashion. So in order to retain your settings, do this:

$("#userLink").fancybox({modal:true}).trigger('click');

But I would recommend you try: $("#userLink").click(); which will trigger the click event and should use your existing settings.


You can also use the fancybox api

  1. hideOnContentClick:false
  2. hideOnOverlayClick:false

Hope this will help


Just add parent: "form:first" to .fancybox({ }); function.

example:

$(".various").fancybox({
                maxWidth: 800,
                maxHeight: 600,
                fitToView: false,
                width: '50%',
                height: '50%',
                autoSize: false,
                closeClick: false,
                openEffect: 'none',
                closeEffect: 'none',
                parent: "form:first"
            });
0

精彩评论

暂无评论...
验证码 换一张
取 消