如何使 Fancybox 版本 2 可拖动

Question

如何使 Fancybox 版本 2 可拖动

5

我目前在开发的网站上使用fancybox 2版本的弹出窗口。我使用fancybox是因为我需要通过这些弹出窗口提交表单。

现在，我找到了另一个帖子，该帖子使得fancybox 1版本可以与名为easydrag的jquery插件一起使用，但问题在于，在那个版本中，虽然弹出窗口是可拖动的，但你无法与表单进行交互，这显然是一个很大的问题。知道有人可以让fancybox 1版本可拖动，让我认为在版本2中也一定有可能，并且最好使用jqueryui函数draggable()。

现在，使用版本1的解决方案，开发人员只需将可拖动属性赋给“.fancybox-outer”类即可，因为fancbox outer是父div。然而，在版本2中，情况并非如此，因为fancybox outer被隐藏在“.fancybox-wrap”和“.fancybox-skin”下面，这两者都不能用来代替“.fancybox-outer”。我甚至进入了fancybox jquery代码并向“.fancybox-wrap”添加了自己的id，名为“#fancybox321”，但仍然不行。

如果有人有任何想法，我会很感激帮助。我制作的测试页面的源代码如下。您可以在我的网站http://lennoxwebdesign.com/test-draggable.php上看到它的实际效果 - 显然请确保您的浏览器允许弹出窗口。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test-draggable</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript" src="jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {

        $('.fancybox').fancybox();

    });


</script>

<script>
  $(function() {
    $( "#fancybox321" ).draggable();
  });
</script>

</head>

<body>



<a class="fancybox fancybox.iframe" href="test-popup-form.php">popup</a>

</body>

- Firebrat

你很可能需要这个：https://dev59.com/emTWa4cB1Zd3GeqPAi2P#10781937（包括带表单的演示）。确保你查看了v2.x的最后一个注释。 - JFK

可能是Jquery Fancybox带滚动条的可拖动问题的重复问题。 - JFK

2

@JFK 谢谢 - 你在那个帖子中的最终建议对我很有帮助。我需要使用AfterShow回调函数。正确的（即经过测试和工作的）代码是：**$('.fancybox').fancybox({ afterShow: function() { $( ".fancybox-wrap" ).draggable();} });** 你可以在链接上看到工作测试页面。再次感谢！ - Firebrat

2个回答

-3

你试过这个吗？

<script src="jquery.easydrag.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // add drag and drop functionality to fancybox
    $("#fancy_outer").easydrag();
});
</script>

对我有效。

- ProForbes

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- algorhythm · Accepted Answer

如果您正在使用jQuery-UI，您可以按照以下步骤操作：

jQuery("#fancybox321").fancybox({
    beforeShow: function() {
        this.wrap.draggable();
    }
});