如何使Fancybox第2版可拖動

我目前在我通過fancybox的第2版開發的網站上有彈出窗口。我使用的是fancybox，因爲我需要能夠通過彈出窗口提交表單。如何使Fancybox第2版可拖動

現在，我已經發現了另一個線程，它使fancybox版本1與一個名爲easydrag的jquery插件一起工作，但問題是在該版本中，雖然彈出窗口是可拖動的，但您無法與窗體進行交互，這顯然是一個主要問題。知道有人將fancybox版本1拖動到可拖動狀態，這讓我認爲在版本2中也是可以的，理想情況下使用jqueryui函數draggable（）。

現在使用版本1解決方案，開發人員只需將可拖動屬性分配給「.fancybox-outer」類並且它工作，因爲fancbox outer是父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>

來源

2013-10-31 Firebrat

你很可能需要這個http://stackoverflow.com/a/10781937/1055987（包括演示與表格）。請確保你檢查了最後一個備註v2.x – JFK

可能重複[Jquery Fancybox拖動滾動條問題]（http://stackoverflow.com/questions/10725866/jquery-fancybox-draggable-issue-with-scrollbars） – JFK

@ JFK謝謝 - 您在該主題中的最終建議是對我的做法。我需要使用AfterShow回調。正確的（即測試和工作）代碼是：** $（'。fancybox'）。fancybox（{afterShow：function（）{$（「.fancybox-wrap」）.draggable（）;}}）; **你可以在[link]（http://lennoxwebdesign.com/test-draggable2.php）上看到工作測試頁面。再次感謝！ – Firebrat

如果您正在使用jQuery的UI，你可以做如下：

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

來源

2014-04-04 13:26:46 algorhythm

-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-16 07:34:33 ProForbes

如何使Fancybox第2版可拖動

回答

相關問題