Подтвердить что ты не робот

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

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

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

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

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

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

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

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

UPDATE:

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

EDIT:

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

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

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

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

Ответ 2

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

parent.$.fn.fancybox.close();

Ответ 3

Ниже приведено базовое диалоговое взаимодействие, загружающее содержимое в 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>

Ответ 4

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

Ответ 5

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

parent.$.nyroModalRemove();

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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

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

Работает:)

Ответ 10

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

<input name="Envoyer" value="Annuler" type="button" onclick="javascript:window.parent.$.fancybox.close();" />

Ответ 11

Попробуйте colorbox, он также хороший.