Закрыть iframe Fancybox при отправке формы с помощью тега BUTTON - не работает - PullRequest
Новая
       19

Закрыть iframe Fancybox при отправке формы с помощью тега BUTTON - не работает

3 голосов
/ 30 марта 2011

Согласно API Fancybox, я использую следующий код в iframe: 

<form>

... // form fields here

<button onclick="parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

Форма фактически закрывается при нажатии кнопки «Сохранить», но содержимое формы не отправляется. Это похоже на событие close, которое запускается до того, как форма действительно отправляет свое содержимое.

Без onclick контент отправляется, но следующая страница открывается внутри фрейма - не то, что я хочу.

Есть ли способ обойти это?

Спасибо за помощь.

Ответы [ 4 ]

8 голосов
/ 30 марта 2011

Вы можете использовать event.preventDefault () метод, подобный этому: 

<form>

... // form fields here

<button onclick="event.preventDefault(); parent.$.fancybox.close();">
<span>Save</span>
</button>

</form>

Затем отправить страницу с помощью jquery

Так что будет лучше сделать это в такой функции: 

function closeME()
{
   event.preventDefault(); 
   parent.$.fancybox.close();
   $('#myForm').submit();
}    
    ... // form fields here

    <button onclick="closeME();">
    <span>Save</span>
    </button>



    </form>


<form action="" method="post" id="myForm">
    ... // form fields here
    <button onclick="closeME();">
    <span>Save</span>
    </button>
</form>

    <script type="text/javascript">
        function closeME() {
            event.preventDefault();
            parent.$.fancybox.close();
            $('#myForm').submit();
        }
    </script>
0 голосов
/ 27 апреля 2013

для других читателей, у которых по-прежнему возникают проблемы с закрытием fancybox из iframe, это может быть связано с тем, что iframe из другого источника в качестве родительского окна.это была проблема, с которой я столкнулся.Роб W предоставил отличное решение, используя postMessage здесь Uncaught TypeError: Не удается прочитать свойство 'fancybox' из неопределенного - ошибка только в Google Chrome?

0 голосов
/ 14 февраля 2013

Этот работает отлично меня: 

$('body',top.document).removeClass('fancybox-lock');
$('.fancybox-overlay',top.document).css('display','none');

Все остальные вещи не работали.

0 голосов
/ 04 мая 2011

Я решил эту проблему, создав кнопки, используя несколько span (в целях стиля) и несколько строк jQuery 

<span id="save_btn" class="fc-button fc-button-prev fc-state-default fc-corner-left fc-corner-right">
        <span class="fc-button-inner">
            <span class="fc-button-content save_button">Save</span>
            <span class="fc-button-effect">
                <span></span>
            </span>
        </span>
</span>

<script>
$('#save_btn').click(function() {
  $('#my_form').submit();
});
</script>
...