Показать 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>

Ответ 1

Насколько я знаю, элемент ввода может не иметь атрибута 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>

Посмотрите на действие в JSBin

Ответ 2

Решение padde является правильным, но встает еще одна проблема, i.e.

Как сказал Адам (вопросник), что он показывает пустое всплывающее окно. Вот полное и рабочее решение

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

Ответ 3

Вы можете использовать:

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

Ответ 4

Прост: например. если div id 'mydiv'

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

Это также делает JS-код функциональным, который находится внутри div.

Ответ 5

Для пользователей, возвращающихся к этому сообщению задолго до того, как был принят первоначальный ответ, можно с уверенностью сказать, что теперь вы можете использовать

data-fancybox-href="#"

для любого элемента (так как данные являются признанным HTML-5 атрибутом), чтобы работа fancybox отображалась в форме ввода, если по какой-то причине вы не можете использовать параметры для инициации по какой-либо причине (например, у вас есть несколько элементов на странице, использующей fancybox, и все они имеют сходный класс, который вы называете fancybox).

Ответ 6

Я использую подход с добавлением ссылки "singleton" для элемента, который вы хотите показать в 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 с опцией "content", он будет дублировать DOM, который находится внутри элементов. Иногда это не нормально. В моем случае мне нужно было иметь одни и те же элементы, потому что они использовались в форме.

Ответ 7

Вы просто используете это, и это будет полезно для вас.

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

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

});