Модульные ящики JQuery и iframe

18

Я использую Simple Modal, и я чувствую, что он не соответствует моему нуждам на данный момент.

Есть ли модальная коробка, которая поддерживает загрузку внешних файлов и позволяет этим внешним файлам закрыть модальный блок и перенаправить родительскую страницу на какой-то URL-адрес.

Пример того, что я хочу сделать. У вас есть список пользователей, вы можете нажать «Добавить пользователя» и «Модальный ящик» с всплывающей формой, вы заполните ее и отправьте. Это закроет окно и перезагрузит страницу списка пользователей, чтобы вы увидели пользователя в списке.

Затем вы можете нажать «Редактировать пользователя», и появится Модальная коробка с информацией о пользователе, заполненной полями формы, и вы сможете редактировать, отправлять и закрывать и обновлять.

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

Я нашел код об этом на Google Code , но просто не может заставить его работать (возможно, другая простая модальная версия

Я также хочу перейти на другой инструмент для модального окна.

UPDATE:

Устанавливается ли поддержка Thickbox или Fancybox из дочернего элемента IFrame?

    
задан Ólafur Waage 04.02.2009 в 18:00
источник
  • Thickbox мертв, используйте что-то еще. (см. их страницу для предложений) –  dland 12.04.2011 в 11:47

11 ответов

9

Fancybox - еще один вариант. Работает аналогично Thickbox

EDIT:

После некоторого воспроизведения вокруг него плагин не поддерживает закрытие Fancybox через дочерний элемент iframe. Я думаю, что это, безусловно, возможно с небольшим усилием (я начал взломать вместе что-то здесь , хотя я подчеркиваю, что это просто POC и не работает, поскольку кнопка внутри iframe удаляет оболочку fancybox div из DOM и поэтому не отображается, когда вы снова нажимаете изображение Google). Интересно, однако, если iframe - это правильные линии, чтобы спуститься вниз.

Чтобы добавить пользователя, я подумал бы, что вы можете представить пользователю модальную форму, подобную той, что находится в Monster сайт, который вы получаете, когда вы нажимаете «Войти». Как только вы нажмете добавить пользователя, сделайте вызов AJAX для источника данных, чтобы вставить нового пользователя, а затем при возврате успеха вы можете либо инициировать обновление страницы, либо использовать AJAX для обновите список.

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

Вместо обновления страницы или окончательного вызова AJAX в каждом сценарии вы можете просто использовать JavaScript / jQuery для обновления сведений о списке / списке, в зависимости от того, был ли пользователь добавлен или отредактирован соответственно.

    
ответ дан Russ Cam 04.02.2009 в 18:17
источник
  • Я очень ценю ваши усилия по этому поводу, и ваша идея использовать AJAX, вероятно, заставит меня довольно далеко от того, что я хочу. Я собираюсь проверить это на работе завтра и плохо обновить свой вопрос, когда найду что-нибудь. Еще раз спасибо. –  Ólafur Waage 05.02.2009 в 01:43
16

Похоже, что вы уже нашли ответ, но для других вы можете закрыть реализацию iFrame FancyBox, используя следующий JavaScript в iFrame:

parent.$.fn.fancybox.close();
    
ответ дан Blegger 24.04.2009 в 23:03
источник
  • Не работает, когда iframe загружает другой сайт из-за межсайтового скриптинга ... –  seldary 03.02.2013 в 09:19
13

Ниже приведено базовое диалоговое взаимодействие, загружающее содержимое в iFrame, а затем закрытие диалога из iFrame.

Обратите внимание, что для иллюстрации этого у меня есть два фрагмента кода. Первый помечен как file1.html. Во-вторых, вы должны называть «myPage.html», если хотите, чтобы он работал и помещал его в тот же каталог, что и первый файл.

Обратите внимание, что вызов для закрытия диалога можно использовать другими способами в зависимости от желаемой функциональности. Например, другой пример может быть при успешном представлении формы.

Создайте файлы локально в вашей системе и откройте файл1.html и попробуйте.

file1.html

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
      $(document).ready(function() {
            $("#modalDiv").dialog({
                modal: true,
                autoOpen: false,
                height: '180',
                width: '320',
                draggable: true,
                resizeable: true,   
                title: 'IFrame Modal Dialog'
            });
            $('#goToMyPage').click(
                function() {
                    url = 'myPage.html';
                    $("#modalDiv").dialog("open");
                    $("#modalIFrame").attr('src',url);
                    return false;
            });                 
      });
    </script>
    </head>
    <body>
        <a id="goToMyPage" href="#">Go to My Page</a>
        <div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>
    </body>
</html>

mypage.html

<html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#clickToClose').click(
                function() {
                    window.parent.$("#modalDiv").dialog('close');
                    return false;
            });
            // uncomment and use the below line close when document is ready (no click action by user needed)
            // the same call could be put elsewhere depending on desired functionality (after successful form submit, etc.)
            // window.parent.$("#modalDiv").dialog('close');                    
        });
    </script>
    </head>
    <body>
        <a id="clickToClose" href="#">Click to close.</a>
    </body>
</html>
    
ответ дан Josh Metcalfe 08.05.2010 в 23:01
источник
3

parent.$.modal.close(); работает для простого модального плагина.

    
ответ дан Francisco 19.08.2009 в 01:50
источник
1

Я нашел решение для меня, он использует nyroModal. Он поддерживает iframe и закрытие модального кода через его дочерний элемент iframe с помощью этого кода.

parent.$.nyroModalRemove();

Я собираюсь принять ответ Руса Кэма, чтобы дать ему больше репутации, так как его ответ заставил меня много думать о том, как это будет работать, и в итоге заставил меня найти ответ.

    
ответ дан Ólafur Waage 05.02.2009 в 10:42
источник
  • Спасибо! Как ни странно, я начал играть с закрытием Fancybox через дочерний элемент iframe, вызвав функцию закрытия fancybox и получив эту работу. Я рад, что вы нашли решение. У вас есть ссылка для nyroModal? –  Russ Cam 05.02.2009 в 17:02
  • Я уверен. nyromodal.nyrodev.com –  Ólafur Waage 05.02.2009 в 17:31
1

это скрипт диалога, когда я прорисовывался с помощью firebug

<iframe> 
       scrolling="auto" 
       height="100%" 
       frameborder="0" 
       width="100%" 
       title="Dialog Title" 
       marginheight="0" 
       marginwidth="0" 
       id="modalIFrame"
       src="test.php" 
</iframe>

Мне нужно изменить высоту до 95%, потому что свиток диалога всегда отображается на экране T.T

    
ответ дан sting 28.02.2011 в 11:51
источник
0

Вы пробовали ThickBox ?

    
ответ дан mathieu 04.02.2009 в 18:04
источник
  • ThickBox мертв. Используйте что-то еще. –  dland 12.04.2011 в 11:46
0

Мой FrameDialog позволит это, он в основном распространяется на Диалог ... если вы используете тот же домен, вы должны иметь возможность вызывать $ .FrameDialog.close (), хотя, если вы перенаправляете, вы может просто перенаправить родителя. window.parent.location будет делать.

Ссылка

    
ответ дан Tracker1 16.06.2010 в 22:39
источник
0

HI, Любой, кто сталкивается с проблемой закрытия Fancy Box iFrame с помощью ручной установки Fancy Box в Wordpress 3.0:

Используйте эту ссылку в своем iframe:

<a href="#" onClick="parent.jQuery.fancybox.close();" title="Close window">close fancybox</a>

Работает:)

    
ответ дан dave 16.07.2010 в 13:38
источник
0

Это работает для меня ...

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />
    
ответ дан Matthieu 01.06.2011 в 15:54
источник
0

Попробуйте colorbox , это тоже хорошо.

    
ответ дан 235 21.02.2013 в 08:25
источник