jQueryUI加載頁面到DIV和模態對話框

我試圖加載頁面到一個模態DIV，但似乎缺少的東西（可能是明顯的！）。這是我的。jQueryUI加載頁面到DIV和模態對話框

的問題 的頁面不加載到DIV，而不是點擊鏈接只是直接轉到頁

在我<head>部分

<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>

我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 UI的
刪除所有代碼的鏈接除event.preventDefault（）; - 這應該保持甚至加載的鏈接，但頁面仍然加載！

來源

2014-02-24 rws907

嘗試使用jQuery UI的iframe裝載您的頁面：

$(".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：這適用於該類模式的任何鏈接。

來源

2014-02-24 22:26:44 fxtrade

同上。這就像jQuery甚至沒有加載，但我確實把它作爲第一個通過Google託管的URL加載的庫。 – rws907

這個腳本在我自己的幾個網站上工作正常......如果你把「console.log（'click'）;」，你看到日誌中的點擊？如果沒有，jquery未加載... – fxtrade

沒有顯示在日誌中。我無法弄清楚爲什麼jQuery沒有加載。這是我頭部鏈接的第一個腳本，我已經通過查看源代碼並單擊Google託管的實例的URL來驗證它是否加載了該庫。那麼我錯過了什麼？ – rws907

首先添加一些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(); 
    }); 
    }); 
});

來源

2014-02-24 23:44:17 markfm

我已經有一個自定義的jQuery UI CSS文件鏈接。查看原始帖子的更新。在document.ready（）中包裝整個函數並沒有做任何事情。鏈接仍然只是打開頁面，就好像jQuery甚至沒有被處理。 – rws907

在您的原始load_modal.js中，您有4個「{」括號。你把它們都放在上半部分。下半部分有2個「{」括號，但是3「}」。這在我的Safari網絡檢查員中馬上顯示出來。在我的解決方案中，我用document.ready（）包裝了這兩個函數。我認爲你的問題可能與這些括號有關。 – markfm

我沒有聽到我原來的括號。感謝那。我替換了我的整個load_modal。與您的腳本js，它仍然表現出相同的行爲。 – rws907

jQueryUI加載頁面到DIV和模態對話框

回答

相關問題