jQueryUI laden, Seite in DIV und in Modaler dialog

Ich versuche eine Seite zu laden, die in einem ein -, modal-DIV, sondern scheint etwas zu fehlen (wohl offensichtlich!). Hier ist, was ich habe.

Das Problem
Die Seiten nicht laden in das div, anstatt einen Klick auf die links führt direkt zu der Seite

In meinem <head> Abschnitt

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

Meine load_modal.js script sieht so aus:

$(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();
        });
    });
})

Und die links, ich versuche in der modal-div so Aussehen

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

Dinge, die ich Versucht habe

  • Verschiedene Versionen von jQuery und jQuery UI
  • Entfernen alle code, außer für die Veranstaltung.preventDefault(); -- das sollte der link auch laden aber die Seite noch lädt!
InformationsquelleAutor rws907 | 2014-02-24
  1. 0

    Laden Sie Ihre Seite in einem iframe mit jQuery UI:

    $(".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: Das funktioniert auf jedem link mit der Klasse modal.

    • Gleiche wie oben. Es ist wie jQuery, ist auch gar nicht laden, aber ich habe es als erste Bibliothek geladen durch die von Google gehosteten URL.
    • Dieses Skript funktioniert gut auf einige websites, die ich besitze... Wenn du "Konsole.log('click');" Sie sehen die klicken Sie auf in der log? Wenn nicht, jquery wird nicht geladen...
    • Nichts zeigt sich in der log. Ich kann nicht herausfinden, warum jQuery ist nicht geladen. Es ist das erste Skript verlinkt in meinem Kopf Abschnitt und ich habe festgestellt, dass, indem Sie die Quelle und klicken Sie auf die URL der Google-gehosteten Instanz, dass es die Bibliothek lädt. So was vermisse ich?
    • Okay also ich hab gebaut ein Skelett-Seite, die nur jquery, jqueryui, und meine custom-css. Auf diese Weise wickeln Sie Ihr Skript in ein Dokument.bereit-Anweisung funktioniert. So, jetzt habe ich, um herauszufinden, ob es eine Verarbeitung, um Fehler auf meiner Seite irgendwo... richtig?
    • Habe das problem gefunden. Anscheinend auch ein einem meiner Scripte hatte einen syntax-Fehler. Nochmals vielen Dank für die Hilfe!
    InformationsquelleAutor fxtrade
  2. 0

    Fügen Sie zunächst einige CSS in Ihre, um das modale Feld rechts:

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

    Dann, leicht ändern Sie Ihre load_modal.js Datei:

    $(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();
    });
  });
});
    • Ich habe bereits eine angepasste jQuery-UI-css-Datei verknüpft. Siehe update zum original-post. Das einwickeln der gesamten Funktion im Dokument.ready() etwas nicht tun. Der link noch, nur die Seite öffnet, als ob jQuery da noch gar nicht bearbeitet.
    • In Ihrer ursprünglichen load_modal.js Sie haben 4 " {"- Klammern. Schließen Sie Sie alle in der oberen Hälfte. Die untere Hälfte hat 2 "{" Klammern, aber 3 "}". Das zeigte sich sofort in meinem Safari web inspector. In meiner Lösung habe ich wickeln Sie beide Funktionen mit dem Dokument.ready(). Ich denke, dein problem im Zusammenhang mit diesen Klammern.
    • Ich habe nicht fangen die Klammern in meinem original. Dank für, die. Ich ersetzte meine gesamte load_modal.js mit Ihrem Skript, und es ist dennoch mit dem gleichen Verhalten.
    • Das symptom würde auch auftreten, wenn deinen <head> link eigentlich nicht laden load_modal.js Datei. Haben Sie zu bestätigen, dass es in den /js/ - Verzeichnis? Wenn Sie in einem untergeordneten Ordner müssen Sie mit src="js/load_modal.js" (entfernen Sie das führende slash vor /js/load_modal.js).
    • Es es geladen hat. Ich konnte die Quelle anzuzeigen, und klicken Sie auf den Pfad zu und öffnete es.
    InformationsquelleAutor mcarlson
Schreibe einen Kommentar