WedX - журнал о программировании и компьютерных науках

Страница загрузки jQueryUI в DIV и в модальный диалог

Я пытаюсь загрузить страницу в модальный DIV, но, кажется, что-то упускаю (вероятно, очевидно!). Вот что у меня есть.

Проблема Страницы не загружаются в div, вместо этого нажатие на ссылки просто переходит на страницу

В моем разделе <head>

<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/load_modal.js"></script>

Мой скрипт load_modal.js выглядит так:

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        height: 400,
        buttons: {
                "Close": function() {
                    $(this).dialog("close");
                }
            }
        }
    });

    $(".modal").on("click", function(e) {
        e.preventDefault();
        $("#dialog").html("");
        $("#dialog").dialog("option", "title", "Loading...").dialog("open");
        $("#dialog").load(this.href, function() {
            $(this).dialog("option", "title", $(this).find("h2").text());
            //$(this).find("h1").remove();
        });
    });
})

И ссылки, которые я пытаюсь поместить в модальный div, выглядят так

<div id="dialog"></div>
<a class="modal" href="/privacy.html">privacy policy</a>

Вещи, которые я пробовал

  • Различные версии jQuery и пользовательского интерфейса jQuery.
  • Удаление всего кода, кроме event.preventDefault(); -- это должно предотвратить даже загрузку ссылки, но страница все еще загружается!

Ответы:


1

Попробуйте загрузить свою страницу в iframe с помощью пользовательского интерфейса jQuery:

$(".modal").on("click", function (event) {
    event.preventDefault();
    //console.log('click'); TO CHECK IF CLICK IS DETECTED
    var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0" width="600" height="400"></iframe>');
    var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
    autoOpen: false,
    modal: true,
    resizable: false,
    width: "auto",
    height: "auto",
    close: function () {
        iframe.attr("src", "");
        }
});
    var src = $(this).attr("href");
    iframe.attr({
        src: src
    });
    dialog.dialog("option", "title", "Your Title...").dialog("open");
});

PS: Это работает для любой ссылки с модальным классом.

24.02.2014
  • То же, что и выше. Это похоже на то, что jQuery даже не загружается, но у меня это первая библиотека, загруженная через URL-адрес, размещенный в Google. 25.02.2014
  • Этот скрипт отлично работает на нескольких веб-сайтах, которыми я владею... Если вы поместите console.log('click');, вы увидите щелчок в журнале? Если нет, jquery не загружен... 25.02.2014
  • В журнале ничего не отображается. Я не могу понять, почему jQuery не загружается. Это первый скрипт, связанный в моем разделе заголовка, и я убедился, что, просмотрев исходный код и щелкнув URL-адрес его экземпляра, размещенного в Google, он загружает библиотеку. Итак, что мне не хватает? 25.02.2014
  • Хорошо, поэтому я создал скелетную страницу, которая включает только jquery, jqueryui и мой пользовательский css. Выполнение этого и обертывание вашего скрипта в операторе document.ready работает. Итак, теперь мне нужно выяснить, есть ли где-то ошибка порядка обработки на моей странице... верно? 26.02.2014
  • Нашел проблему. Очевидно, еще в одном из моих скриптов была синтаксическая ошибка. Спасибо еще раз за помощь! 26.02.2014

  • 2

    Сначала добавьте немного CSS, чтобы модальное окно выглядело правильно:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    

    Затем немного измените файл load_modal.js:

    $(document).ready(function() {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        width: 600,
        height: 400,
        buttons: {
                "Close": function() {
                    $(this).dialog("close");
                }
            }
        });
    
    
    $(".modal").on("click", function(e) {
        e.preventDefault();
        $("#dialog").html("");
        $("#dialog").dialog("option", "title", "Loading...").dialog("open");
        $("#dialog").load(this.href, function() {
            $(this).dialog("option", "title", $(this).find("h2").text());
            //$(this).find("h1").remove();
        });
      });
    });
    
    24.02.2014
  • У меня уже есть связанный css-файл пользовательского интерфейса jQuery. См. обновление исходного сообщения. Обертывание всей функции в document.ready() ничего не дало. Ссылка по-прежнему просто открывает страницу, как будто jQuery даже не обрабатывается. 25.02.2014
  • В вашем исходном load_modal.js у вас есть 4 скобки {. Вы закрываете их все в верхней половине. Нижняя половина имеет 2 скобки {, но 3}. Это сразу же появилось в моем веб-инспекторе Safari. В моем решении я оборачиваю обе функции в document.ready(). Я думаю, что ваша проблема может быть связана с этими скобками. 25.02.2014
  • Я не поймал скобки в моем оригинале. Спасибо за это. Я заменил весь свой load_modal.js вашим скриптом, и он по-прежнему ведет себя так же. 25.02.2014
  • Симптом также возникнет, если ваша ссылка ‹head› на самом деле не загружает файл load_modal.js. Вы подтвердили, что он находится в каталоге /js/? Если он находится в дочерней папке, вам может понадобиться использовать src=js/load_modal.js (удалите косую черту перед /js/load_modal.js). 26.02.2014
  • Это загрузило его. Я мог просмотреть источник и щелкнуть по пути к нему, и он открылся. 26.02.2014
  • Новые материалы

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

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]