用Fancybox顯示div

點擊一個按鈕，我試圖在一個漂亮的盒子中顯示一個簡單的隱藏div。這是代碼，工程：用Fancybox顯示div

$("#btnForm").fancybox({ content: $("#divForm").html() });

但是從我讀過，這似乎並沒有要完成這一任務的標準方式。我已經試過以下每一項，不成功：

$("#btnForm").fancybox({ href: "#divForm" }); 

$("#btnForm").click(function() { 
    $.fancybox({ href: "#divForm" }); 
}); 

$("#btnForm").click(function() { 
    $("#divForm").fancybox(); 
});

有人能指出我如何正確地使用這個工具的正確方向？這裏是我的html：

<input type="button" value="Load Form" id="btnForm" /> 

    <div id="divForm" style="display:none"> 
     <form action="tbd"> 
      File: <input type="file" /><br /><br /> 
      <input type="submit" /> 
     </form> 
    </div>

來源

2012-03-18 Adam Rackis

據我所知，一個input元素可能沒有href屬性。這是問題出現的地方，因爲Fancybox從該屬性獲取有關內容的信息。下面的代碼完全適合我，只需使用a元素而不是input元素。另外，這就是我所說的「標準方式」。

<html> 
<head> 
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script> 
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" /> 
</head> 
<body> 

<a href="#divForm" id="btnForm">Load Form</a> 

<div id="divForm" style="display:none"> 
    <form action="tbd"> 
     File: <input type="file" /><br /><br /> 
     <input type="submit" /> 
    </form> 
</div> 

<script type="text/javascript"> 
    $("#btnForm").fancybox(); 
</script> 

</body> 
</html>

See it in action on JSBin

來源

2012-03-18 19:58:43

嗯，好吧+1，因爲它看起來更接近我需要的東西，但由於某些原因，fancybox顯示空白。在控制檯中沒有錯誤，代碼看起來很適合我。我們兩個都沒有看到類型嗎？ – 2012-03-18 20:18:44

我添加了一個完整的工作示例，至少它適用於我（帶Safari和Firefox的OSX） – 2012-03-18 20:58:49

該代碼不適用於Fancybox 1.3，但使用更新的版本可以完美地工作。謝謝。 – 2012-03-18 21:01:35

你可以使用：

$('#btnForm').click(function(){ 
    $.fancybox({ 
      'content' : $("#divForm").html() 
     }); 
};

來源

2012-03-18 19:36:04 aurbano

這只是我已有的更長版本。我認爲有一個更直接的方式來獲得這個，使用href配置屬性 – 2012-03-18 19:39:26

真的，你可以簡單地使用'$（「＃btnForm」）。click（function（）{（「＃divForm」）。fancybox（）; }）;' – aurbano 2012-03-18 19:41:38

我也試過。這是我嘗試失敗的版本之一。 – 2012-03-18 19:51:42

padde的解決方案是對的，但挺起另一個問題即

如所述由Adam（提問），它是表示空彈出。這裏是完整和工作液

<html> 
<head> 
    <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script> 
    <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" /> 
</head> 
<body> 

<a href="#divForm" id="btnForm">Load Form</a> 

<div id="divForm" style="display:none"> 
    <form action="tbd"> 
     File: <input type="file" /><br /><br /> 
     <input type="submit" /> 
    </form> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $("#btnForm").fancybox({ 
     'onStart': function() { $("#divForm").css("display","block"); },    
     'onClosed': function() { $("#divForm").css("display","none"); } 
    }); 
}); 
</script> 

</body> 
</html>

來源

2013-05-02 08:44:43 wakqasahmed

你的回答比較好。我只想爲Fancybox 2上的其他新手添加名稱更改。 'afterLoad'：function（）{$（「＃divForm」）.css（「display」，「block」）; }， 'afterClose'：function（）{$（「＃divForm」）。css（「display」，「none」）; } – borayeris 2014-05-16 15:46:36

感謝您指出'onStart'和'onClosed'。這應該被添加到選定的答案。 – 2014-07-17 15:00:28

感謝您的額外開始和結束部分。它解決了盒子最初是空的問題。 – 2016-02-01 16:10:30

我使用的方法與追加「單身」鏈接，你想的fancybox顯示元素。這是代碼，我有一些小的修改使用：

function showElementInPopUp(elementId) { 
    var fancyboxAnchorElementId = "fancyboxTriggerFor_" + elementId; 
    if ($("#"+fancyboxAnchorElementId).length == 0) { 
     $("body").append("<a id='" + fancyboxAnchorElementId + "' href='#" + elementId+ "' style='display:none;'></a>"); 
     $("#"+fancyboxAnchorElementId).fancybox(); 
    } 

    $("#" + fancyboxAnchorElementId).click(); 
}

附加說明：如果你表現出與「內容」選項的fancybox，它會複製DOM，這是內部的元素。有時候這不行。在我的情況下，我需要有相同的元素，因爲它們在表單中使用。

來源

2014-01-17 18:40:30

你只需要使用這一點，它會有助於您

$("#btnForm").click(function(){ 

$.fancybox({ 
    'padding': 0, 
    'width': 1087, 
    'height': 610, 
    'type':  'iframe', 
    content: $('#divForm').show(); 
     }); 

});

來源

2014-05-07 05:15:14

簡單：例如如果div id'mydiv'

jQuery.fancybox.open({href: "#mydiv"});

這也使得JS代碼功能在div內。

來源

2015-01-19 16:45:21 Azghanvi

您的解決方案非常簡單:) – l00k 2017-11-25 23:45:18

對於用戶回來這個帖子早在最初的回答被接受後，就可以還清注意，現在你可以在任何元素上使用

data-fancybox-href="#"

（因爲數據是HTML-5接受屬性）如果fancybox在輸入表單上工作，如果由於某種原因你不能使用這些選項來啓動（比如說你在頁面上有多個使用fancybox的元素，並且他們都共享一個類似的類，你可以調用fancybox上）。

來源

2015-04-26 15:48:04 Daemedeor

謝謝，作品完美 – OnengLar 2017-09-01 09:42:26

用Fancybox顯示div

回答

相關問題