Fancybox.close () на фрейме - PullRequest
Новая
       43

Fancybox.close () на фрейме

9 голосов
/ 02 февраля 2012

Я использую последнюю версию fancybox (2.0.4), и я создал fancybox для iframe. содержимое отображается правильно. Я добавляю кнопку «Закрыть» в мой HTML, который отображается внутри iframe. Мне бы хотелось, чтобы кнопка «Закрыть» имела такой же результат, как нажатие на «х» в правом верхнем углу. я знаком с FancyBox, если iframe возвращает parent. $ как неопределенный (с использованием WordPress) , а мой parent является объектом DOM, в котором ничего нет. также попробовал 

window.parent.jQuery.fancybox.close();
window.parent.jQuery.fn.fancybox.close();
parent.jQuery.fn.fancybox.close();
parent.jQuery.fancybox.close();

любая помощь?

UPDATE:

a.js (связан с a.html) 

$(document).ready(function() {
    $(".fancybox").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        type        : 'iframe',
        openEffect  : 'none',
        closeEffect : 'none',
        afterClose  : function() { 
            window.location.reload();
        }
    });
});

a.html 

<a class="fancybox fancybox.iframe" id="newLink" href="new.html">link</a>

как мне получить кнопку в new.html, которая закрывает окно iframe fancybox

ОБНОВЛЕНИЕ: полные HTML-файлы

a.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
        <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(".fancybox").fancybox({
                    maxWidth    : 800,
                    maxHeight   : 600,
                    fitToView   : false,
                    width       : '70%',
                    height      : '70%',
                    autoSize    : false,
                    closeClick  : false,
                    type        : 'iframe',
                    openEffect  : 'none',
                    closeEffect : 'none',
                    afterClose  : function() { 
                        window.location.reload();
                    }
                });
            });
        </script>
    </head>

    <body>
        <a class="fancybox fancybox.iframe" id="newLink" href="b.html">link</a>


    </body>
</html>

b.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
        <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js?v=2.0.4"></script>
    </head>

    <body>
        <input type="submit" value="Cancel" id="cancelBtn" onclick="parent.jQuery.fancybox.close()"/>
    </body>
</html>

Ответы [ 3 ]

31 голосов
/ 02 февраля 2012

Ваша кнопка закрытия вручную должна выглядеть следующим образом: 

<a href="javascript:parent.jQuery.fancybox.close();"><img src="myCloseButton.png" alt="close fancybox" /></a>

ОБНОВЛЕНИЕ : вы должны использовать onsubmit на теге <form>, а не на изображении button, чтобыв вашем "new.html" установите что-то вроде 

<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">

ОБНОВЛЕНИЕ # 2 : см. рабочая демонстрационная страница

ОБНОВЛЕНИЕ #3 : Я решил удалить все свои дополнительные комментарии к этому ответу, так как обсуждение стало слишком длинным и ни к чему нас не привело.Я даю код и ссылку на рабочую демонстрацию, если это может помочь кому-то еще.

2 голосов
/ 22 апреля 2014 
    try{
        parent.jQuery.fancybox.close();
    }catch(err){
        parent.$('#fancybox-overlay').hide();
        parent.$('#fancybox-wrap').hide();
    }

!!! Не поддерживается onClose !!!

0 голосов
/ 29 октября 2015

Попробуйте это в своем Javascript:

$. Fancybox.close ();

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

Похожие темы

...