顯示HTML內容的模式窗口

我正在這裏開發一個小網站（剛開始使用Zurb Foundation），並且製作了一個基本的網格佈局，其中包含大型metro style div縮略圖（頁面上有10個縮略圖）。顯示HTML內容的模式窗口

我正在尋找爲用戶添加交互，即當用戶點擊這些縮略圖中的任何一個時，模態窗口顯示出顯示關於所點擊的特定項目的更多信息。（有點類似於我們有豐富的圖片庫燈箱插件）

但是，我想知道從以下兩個方面實現相同的更好的方法是什麼。我的模式彈出對話框的內容應該在一個單獨的HTML中，我應該通過用戶的點擊通過AJAX獲取它們？
或者我應該只隱藏這些部分並在用戶點擊時顯示它們？
每個部分類似於一個項目名稱，並點擊它顯示項目描述（不同的項目可能有視頻，圖像，說明等）

無論從上述哪個更好的方法，這將是偉大的檢查一個關於如何顯示模式彈出窗口的示例（考慮到它應該是可以優選應用於所有縮略圖並且不爲每個縮略圖執行單獨的單獨處理程序的東西）

來源

2013-06-23 user1240679

如果你有一個codepen或小提琴，這將有助於獲得一些幫助。我確實有一個想法，但不想構建一些內容結構，這些內容結構可能與您的內容截然不同。（相鄰的選擇器，旁邊......）thx –

最好的方式是否要將這些對話框放在單獨的文件中，並在用戶點擊某些內容時通過ajax加載它們。這會讓事情變得更容易管理，而且他們會更有條理。

如果您將html存儲在隱藏的div中，可能會浪費資源，因爲用戶不會使用該頁面加載中的所有對話框。您也可能難以保持代碼最新，因爲您必須在隱藏的div部分更新它，然後在外部文件部分進行更新（如果使用兩者）。

我的建議是在php類/函數中使用所有html（或使用php MVC框架），並在需要時使用它加載它。這樣你只需要從一個地方進行更新就可以在整個網站上進行更改。對於AJAX加載，以JSON格式加載html，然後您可以在JSON中添加其他變量（這將使代碼更加有組織），例如外部腳本和CSS文件以及狀態指示器。

來源

2013-06-23 18:51:45 Oscar

這裏是一個獨立的例子。它運行後，請注意以下幾點：

加載的jQuery/jQueryUI的在<head>標籤
識別庫的點擊來自哪個圖像：（1）觸發點擊事件點擊img類的元素的任何時間，和（2）通過jQuery
獲得該特定IMG的ID使用AJAX到圖像ID發送給PHP處理器文件
PHP處理器文件做一些事情，併發送回結果從PHP
結果接收在AJAX成功函數中。使用接收到的數據（來自PHP）的所有處理MUST必須在成功函數內發生，包括調用JQUI dlg
JQUI dlg從TEST中的空DIV開始。PHP，其中填充有標記格蘭AJAX成功函數內部：$('#dlgID').html(data_received_from_PHP);
記得關閉JQUI DLG按鈕被點擊OK時，（否則你可能只是把該命令在JQUI DLG的close:部分）

要運行這個簡單的例子，你需要兩個文件：

文件1：test.php的

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 

     <style> 
     </style> 

     <script type="text/javascript"> 
      $(document).ready(function() { 

       $('.img').click(function() { 
        var iid = $(this).attr('id'); 
        //alert('You clicked ID: ' + iid); 
        $.ajax({ 
         type: "POST", 
         url: "yogibear.php", // "source.php", 
         data: "iid="+iid, 
         success: function(data) { 
          //alert('AJAX recd: ' +data); 
          $('#moddlg').html(data); 
          $('#moddlg').dialog('open'); 
         } //END success fn 
        }); //END $.ajax 

       }); 
       $('#moddlg').dialog({ 
        autoOpen: false, 
        modal: true, 
        width: 400, //default is 300 
        title: 'This is yer dialog:', 
        buttons: { 
         'Click Me': function() { 
          $(this).dialog('close'); 
         } 
        }, 
        close: function() { 
         alert('Dlg is closing... I can do more stuff in here, including running another AJAX call'); 
        } 
       }); 

      }); //END $(document).ready() 

     </script> 
    </head> 
<body> 

    <img id="i-1" class="img" src="http://placehold.it/140x100" /> 
    <img id="i-2" class="img" src="http://placehold.it/140x100" /> 
    <img id="i-3" class="img" src="http://placehold.it/140x100" /> 
    <img id="i-4" class="img" src="http://placehold.it/140x100" /> 
    <div id="moddlg"></div> 

</body> 
</html>

文件2：YOGIBEAR.PHP

<?php 
    $x = $_POST['iid']; 
    die('PHP file recd: ' . $x); 
    //Of course, this is where you receive the img id sent via AJAX 
    //and look up stuff in MySQL or etc, then return the results 
    //simply by putting it all into a variable and ECHOing that 
    //variable. Or, you can use JSON to echo an array - but make 
    //sure to look up a couple of examples as you must add another 
    //couple of params to the AJAX code block

來源

2013-06-23 21:05:50 gibberish

顯示HTML內容的模式窗口

回答

相關問題