web-dev-qa-db-ja.com

Fancyboxでdivを表示する

ボタンをクリックすると、シンプルな隠し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>
javascriptjqueryfancybox
18
Adam Rackis

私の知る限り、入力要素には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">
  $(function(){
    $("#btnForm").fancybox();
  });
</script>

</body>
</html>

JSBinで実際に見てください

29
Patrick Oscity

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>
11
wakqasahmed

次を使用できます。

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

最初の回答が受け入れられてからずっと後にこの投稿に戻ってきたユーザーの場合、使用できるようになったことに注意してください

data-fancybox-href="#"

何らかの理由で（データがHTML-5に受け入れられた属性であるため）何らかの理由でオプションを使用できない場合（ページに複数の要素があるなど）、fancyboxが入力フォームで機能するようにしますfancyboxを使用し、それらはすべてfancyboxと呼ばれる同様のクラスを共有します）。

3
Daemedeor

シンプル：例div id 'mydiv'の場合

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

これにより、div内にあるJSコードも機能します。

2
Azghanvi

あなたはこれを使うだけであなたに役立つでしょう

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

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

});
1
Syed Amir Bukhari

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();
}

追加の説明：「content」オプションでfancyboxを表示すると、要素内にあるDOMが複製されます。時々これは大丈夫ではありません。私の場合、フォームで使用されていたため、同じ要素が必要でした。

1
Marat Gallyamov