5

我目前在通过fancybox 2 版开发的网站上有弹出窗口。我正在使用fancybox，因为我需要能够通过所述弹出窗口提交表单。

现在，我实际上找到了另一个线程，它让 fancybox 版本 1 与一个名为 easydrag 的 jquery 插件一起工作，但问题是在那个版本中，虽然弹出窗口是可拖动的，但你不能与表单交互，这显然是一个主要问题。知道有人让 fancybox 版本 1 可以拖动让我认为版本 2 也必须是可能的，最好是使用 jqueryui 函数 draggable()。

现在使用版本 1 解决方案，开发人员只需将可拖动属性分配给“.fancybox-outer”类就可以了，因为 fancbox 外部是父 div。然而，在版本 2 中，情况并非如此，因为 fancybox outer 被埋在“.fancybox-wrap”和“.fancybox-skin”之下，这两者都不能代替“.fancybox-outer”。我什至进入 fancbox jquery 并将我自己的 id 添加到名为“#fancybox321”的“.fancybox-wrap”中 - 仍然不好。

如果有人有任何想法，我很乐意提供帮助。我制作的测试页面的源代码如下。您可以在我的网站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>
4

2 回答 2

5

如果您使用的是 jQuery-UI，您可以执行以下操作：

jQuery("#fancybox321").fancybox({
    beforeShow: function() {
        this.wrap.draggable();
    }
});
于 2014-04-04T13:26:46.670 回答
-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>

这个对我有用。

于 2015-11-16T07:34:33.857 回答