JQuery Модальные Коробки и Iframe - PullRequest
19 голосов
/ 04 февраля 2009

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

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

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

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

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

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

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

UPDATE:

Поддерживает ли Thickbox или Fancybox закрытие от дочернего элемента IFrame?

Ответы [ 11 ]

16 голосов
/ 25 апреля 2009

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

parent.$.fn.fancybox.close();
13 голосов
/ 09 мая 2010

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

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

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

Создайте файлы локально в вашей системе, откройте файл file1.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>
9 голосов
/ 04 февраля 2009

Fancybox также является другим вариантом. Работает аналогично Thickbox

РЕДАКТИРОВАТЬ:

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

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

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

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

3 голосов
/ 19 августа 2009

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

1 голос
/ 28 февраля 2011

это сценарий диалога, когда я отследил с помощью 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

1 голос
/ 05 февраля 2009

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

parent.$.nyroModalRemove();

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

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

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

0 голосов
/ 01 июня 2011

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

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />
0 голосов
/ 16 июля 2010

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

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

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

Работает:)

0 голосов
/ 17 июня 2010

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

http://plugins.jquery.com/project/jquery-framedialog

...