Откройте Fancybox (или equiv) из формы input type="submit"

Ответ 1

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

Для этого я использовал плагин jQuery Form (http://malsup.com/jquery/form/), чтобы легко преобразовать форму в вызов ajax. Затем я использовал обратный вызов успеха для загрузки ответа в fancybox с помощью ручного вызова в $.fancybox().

$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText
            });
        }
    }); 
});

Поэтому вместо прикрепления fancybox к некоторому искусственному <a> tag, вы присоединяете ajaxForm к самой форме.

Ответ 2

Лучше всего использовать "на лету" html, т.е.

$("#buttontoclick").click(function() {
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({
        overlayShow: true
    }).click();
});

Ответ 3

ПОПРОБУЙТЕ ЭТО

$(document).ready(function() {
  $("#link").fancybox();
  $("#btn").click(function(){
    $("#link").trigger('click');
  });
});

<input type="button" id="btn" value="Button" />
<div style="display:none;"> 
 <a href="#test" id="link">Click</a>
</div>

<div id="test" style="display:none;">fancy box content</div>

при нажатии кнопки вы вызываете клик по скрытой ссылке href.

надеюсь, что это поможет

Ответ 4

Fancybox может напрямую обрабатывать запросы ajax без необходимости дополнительных сценариев jQuery.

$("#login_form").bind("submit", function() {

    $.ajax({
        type        : "POST",
        cache       : false,
        url         : "/login.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });

    return false;
});

<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>

Ответ 5

Основано на

• Garland Pope оригинальное решение [меньше .ajaxForm]
• Решение AJAX для звонков Паоло Бергантино [в качестве замены на .ajaxForm]
• Fancybox загружает обработчик анимации по Myself [так что пользователь знает, что содержимое загружается]

-

$(document).ready(function() {
    $("#myForm").submit(function() {
        $.fancybox.showLoading(); // start fancybox loading animation
        $.ajax({
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $.fancybox({ 'content' : response }); // target response to fancybox
            },
            complete: function() { // on complete...
                $.fancybox.hideLoading(); //stop fancybox loading animation
            }
        });
        return false; // stop default submit event propagation
    }); 

});

Ответ 6

Вы можете сделать ajax-представление данных формы, сохранить данные в сеансе и затем вызвать ссылку.

Ответ 7

Я только что боролся с этим и нашел способ отобразить результаты в iframe fancy box, я не очень хорошо разбираюсь в ajax, но для этого мне понадобилось php-решение, использующее jquery, какие-либо способы здесь, мой первый ответ!:

в вашем jquery.fancybox js файле потребуется небольшая настройка, я использовал jquery.fancybox.1.3.4.pack.js. откройте это с помощью любого редактора и т.д. и выполните поиск: name="fancybox-frame: thats it, должен быть только один экземпляр этого найденного и будет выглядеть так:

 name="fancybox-frame'+(new Date).getTime()+'"

Теперь вы хотите переименовать целое:

fancybox-frame'+(new Date).getTime()+'` 

ко всему, что вы хотите, я только что назвал его: "fbframe" и сохраните файл. Теперь добавьте настройки jquery и форму следующим образом, и он должен работать нормально:

//activate jquery on page load and set onComplete the most important part of this working

$(document).ready(function(){

        $("#a").fancybox({
                'width'             : '75%',
                'height'            : '100%',
                'autoScale'         : false,
                'type'              : 'iframe',
                'onComplete':function (){$('#formid').submit();},
            }); 
         });

//function called onclick of form button.      
function activatefancybox(Who){
    $("#setID").val(Who); // i set the value of a hidden input on the form
    $("#a").trigger('click');//trigger the hidden fancybox link

    }

// hidden link 
 <a id="a" href='#'></a> 

 // form to submit to iframe to display results. 
 // it is important to set the target of the form to the name of 
 // the iframe you renamed in the fancybox js file.
 <form name='iduser' id='iduser' action='page.php' target='fbframe' method='post'>
 <input />
 <input />
 <input id='setID' type='hidden' name='userid' value='' />
 <input type="button" onClick='testfb(123)' />
 </form>

Прогресс:

нажмите отправить → функция вызова → функция нажмите ссылку FB → onComplete

onComplete Отправляет форму iframe после того, как FB загрузил ее! сделал.

Обратите внимание, что я вырвал это из моего текущего проекта и только что отредактировал некоторые необходимые части, я по-прежнему любительский кодер и рекомендовал бы ajax, если можно. и также я использую только FB1! FB2 теперь доступен.

Ответ 8

Это решение может служить вашей цели:

• no ajax calls
• использовать опцию fancybox iframe
• передать url [+ данные через метод jquery serialize] в опции fancybox href
• загрузка анимации осуществляется автоматически

-

$(document).ready(function(){
        $('#yourform').submit(function() {
            var url = $(this).attr("action") + "?" + $(this).serialize();
            $.fancybox({
                href: url,
                'type': 'iframe'
            });
            return false;
        });
});

Ответ 9

Я просто должен был это сделать. Вот как я это сделал.

$('#elementid').fancybox({
   onStart : function() {
      $.post($(this).attr('href'), $('#formid').serialize());
   }
});

Таким образом, вы можете отправить форму и вызвать fancybox всего за один снимок. Он представляет собой стиль формы ajax. Кнопка "отправить" должна находиться в <a> тег.

Надеюсь, что это поможет.