Показать div с Fancybox - PullRequest
Новая
       5

Показать div с Fancybox

18 голосов
/ 18 марта 2012

По нажатию кнопки я пытаюсь показать простой скрытый 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>

Ответы [ 7 ]

29 голосов
/ 18 марта 2012

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

11 голосов
/ 02 мая 2013
Решение

padde верное, но подняло еще одну проблему, т.е.

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

<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>
6 голосов
/ 18 марта 2012

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

$('#btnForm').click(function(){
    $.fancybox({
            'content' : $("#divForm").html()
        });
};
3 голосов
/ 26 апреля 2015

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

data-fancybox-href="#"

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

2 голосов
/ 19 января 2015

Простой: например, if div id 'mydiv' 

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

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

1 голос
/ 07 мая 2014

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

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

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

});
1 голос
/ 17 января 2014

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

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

Нет похожих вопросов

...