小编Fir*_*rat的帖子

如何使Fancybox版本2可拖动

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

现在,我实际上发现了另一个让fancybox版本1与一个名为easydrag的jquery插件一起使用的线程,但问题是在该版本中,虽然弹出窗口是可拖动的,但你无法与表单进行交互,这显然是一个主要问题.知道有人将fancybox版本1设置为可拖动,这让我觉得它必须适用于版本2,理想情况下使用jqueryui函数draggable().

现在使用版本1解决方案,开发人员只是将draggable属性分配给".fancybox-outer"类并且它起作用,因为fancbox outer是父div.然而,在版本2中,情况并非如此,因为fancybox外部被隐藏在".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>

Run Code Online (Sandbox Code Playgroud)

jquery jquery-ui-draggable fancybox-2

Fir*_*rat

2015 03-10

5
推荐指数

1
解决办法

3082
查看次数