帶有動態內容的jquery模態

好吧，所以我使用下面的代碼來拉出一個模式窗口，只要用戶點擊顯示的鏈接。一切工作正常，但我需要也傳遞一個變量到模態窗口中加載的頁面，我不知道如何做到這一點。鏈接將明顯改變：帶有動態內容的jquery模態

<a id="testmodal" href="modal.php?id=$id">Test</a>

但對讓modal_window.php收到$ id變量，當它在模態窗口中加載了jQuery做哪些修改需要什麼？任何幫助將是可怕的...謝謝！

    <style> 
     body{ 
      margin:0; 
      padding:0; 
     } 

     #overlay { 
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
      background:#000; 
      opacity:0.5; 
      filter:alpha(opacity=50); 
     } 

     #modal { 
      position:absolute; 
      background:url(tint20.png) 0 0 repeat; 
      background:rgba(0,0,0,0.2); 
      border-radius:14px; 
      padding:8px; 


     } 

     #content { 
      border-radius:8px; 
      background:#fff; 
          padding:20px; 

     } 

     #close { 
      position:absolute; 
      background:url(close.png) 0 0 no-repeat; 
      width:24px; 
      height:27px; 
      display:block; 
      text-indent:-9999px; 
      top:-7px; 
      right:-7px; 
     } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
      </script> 
    <script> 
     var modal = (function(){ 
      var 
      method = {}, 
      $overlay, 
      $modal, 
      $content, 
      $close; 

      // Center the modal in the viewport 
      method.center = function() { 
       var top, left; 

       top = Math.max($(window).height() - $modal.outerHeight(), 0)/2; 
       left = Math.max($(window).width() - $modal.outerWidth(), 0)/2; 

       $modal.css({ 
        top:top + $(window).scrollTop(), 
        left:left + $(window).scrollLeft() 
       }); 
      }; 

      // Open the modal 
      method.open = function (settings) { 
       $content.append(settings.content); 

       $modal.css({ 
        width: settings.width || 'auto', 
        height: settings.height || 'auto' 
       }) 

       method.center(); 

       $(window).bind('resize.modal', method.center); 

       $modal.show(); 
       $overlay.show(); 
      }; 

      // Close the modal 
      method.close = function() { 
       $modal.hide(); 
       $overlay.hide(); 
       $content.empty(); 
       $(window).unbind('resize.modal'); 
      }; 

      // Generate the HTML and add it to the document 
      $overlay = $('<div id="overlay"></div>'); 
      $modal = $('<div id="modal"></div>'); 
      $content = $('<div id="content"></div>'); 
      $close = $('<a id="close" href="#">close</a>'); 

      $modal.hide(); 
      $overlay.hide(); 
      $modal.append($content, $close); 

      $(document).ready(function(){ 
       $('body').append($overlay, 
           $modal);      
      }); 

      $close.click(function(e){ 
       e.preventDefault(); 
       method.close(); 
      }); 

      return method; 
     }()); 

     // Wait until the DOM has loaded before querying the document 
     $(document).ready(function(){ 




      $('a#testmodal').click(function(e){ 
       $.get('modal_window.php', function(data){ 
          modal.open({content: data});}); 
       e.preventDefault(); 
      }); 



     }); 



    </script> 
</head> 
<body> 


<a id="testmodal" href="modal.php">Test</a> 
</body> 
</html>

來源

2013-07-02 matt tuman

您可以檢查並在頁面像這樣開始恢復使用jQuery的ID：

var url = window.location.pathname; 
var id = url.substring(url.lastIndexOf('/') + 1);

或PHP/jQuery的：

var id = '<?php if(isset($_GET['id']))echo($_GET['id']; ?>';

來源

2013-07-02 20:12:05

好，謝謝！但是，我會在哪裏插入我的代碼？它會進入我的點擊功能嗎？ –

如果你想在所有你可以插入它在$（document）.ready（function（）{// code}）頁面的開始處插入它;你可以在所有的腳本之前擁有這個id，並在你想要的地方使用它@matttuman –

不要簡單地回顯id'echo $ _GET ['id']'，應該使用'htmlspecialchars（）'來防止XSS http：// stackoverflow .com/questions/2159724/how-can-escaping-be-used-to-prevent-xss-attacks !! – mkutyba

這可以這樣做通過URL捕獲變量。你可以這樣用javascript做到這一點：

function getQueryVariable(variable) 
{ 
     var query = window.location.search.substring(1); 
     var vars = query.split("&"); 
     for (var i=0;i<vars.length;i++) { 
       var pair = vars[i].split("="); 
       if(pair[0] == variable){return pair[1];} 
     } 
     return(false); 
}

參考：http://css-tricks.com/snippets/javascript/get-url-variables/

來源

2013-07-02 20:13:22

帶有動態內容的jquery模態

回答

相關問題