如何在彈出/疊加中嵌入其他URL的內容？

我正在尋找在我的頁面上有一個錨點，點擊時顯示覆蓋/彈出（我不確定是否有正確的術語 - 我指的是當背景中的頁面變爲灰色時直到彈出/覆蓋關閉爲止）。如何在彈出/疊加中嵌入其他URL的內容？

疊加層的內容不應該是靜態的，而應該從命名的URL中取出。實際上，覆蓋圖充當另一個URL的窗口。我對HTML或CSS或Javascript的知識都很瞭解，但歡迎提供任何和所有建議。

謝謝。

2014-03-03 Pyderman

請向我們展示您至今嘗試過的代碼。 – Jatin

一些使用Google進行搜索的頁面：http://www.developphp.com/view.php?tid=1256。這爲我提供了疊加彈出功能。現在我需要它來解析其他URL並填充覆蓋。不知道從哪裏開始。 – Pyderman

沒有你的具體設置的任何知識，很難完全理解你想要完成什麼，但這是我會做的。

如果你還沒有，看看jQuery。特別是jQueryUI。 jQueryUI具有您正在尋找的「彈出式」效果（稱爲「模式」）。實現這些庫非常簡單，只需將JavaScript文件包含在HTML中，然後編寫幾行JavaScript（jQuery變體）以將必要的JS處理程序附加到DOM。看看「查看源代碼」鏈接on this page，看看如何設置模態。

一旦你已經啓動並運行了，請參考api頁面上的jQuery的$ .ajax函數（我不能再放置更多鏈接或者我會鏈接你）。這裏的一般想法是，您將AJAX請求發送到您選擇的URL，然後使用JS（或jQuery）將該內容插入到之前爲模式設置的內容中。插入數據後，您將調用打開的模式，該模式現在將具有您通過AJAX請求的內容。

Here's a jsfiddle這將告訴你最低限度的你需要啓動和運行。

$(function() { 
    $("#dialog-modal").dialog({ 
     height: 140, 
     modal: true, 
     autoOpen: false 
    }); 

    $(document).on("click", ".load-modal", function(event){ 
     event.preventDefault(); 
     $.ajax({ 
      url: "your_url.php", 
      cache: false, 
      method: 'post', 
      success: function(data){ 
      $("#dialog-modal").append(data); 
      } 
     }); 
     $("#dialog-modal").dialog("open"); 
    }); 
});

來源

2014-03-03 21:37:28

如果你想要的是一個模態對話框，你可以做到這一點，而不通過creating a Bootstrap modal寫任何JavaScript/CSS，然後讓一個正常的鏈接只有兩個附加屬性：

data-toggle="modal" 
data-target="#yourModal"

這種解決方案需要引導。

來源

2014-03-03 22:05:45

如何在彈出/疊加中嵌入其他URL的內容？

回答

相關問題