2013-07-03 67 views
0

嗨我正在使用下面的代码将文件modal_window.php加载到当前页面上的模态窗口中。将php变量传递给模态窗口的麻烦

<style> 
     * { 
      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(){ 

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


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





     }); 



    </script> 
</head> 
<body> 


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

这样做虽然我试图传递变量$ ID用来modal_window.php:

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

然后

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

相反的$ id的实际值(在这种情况下是1)传递给modal_window.php传递的是java脚本变量(varid)的名称。所以“varid”是modal_window.php显示的内容。有没有人看到我犯的错误?谢谢!

+0

请不要发布您的所有代码,请把它修剪到只有重要的部分。 – Ohgodwhy

+0

没关系我解决了它 –

回答

1

在您的获取调用中,您的id等于文字varid。相反,也许

$.get('modal_window.php?id=' + varid, function(data){ 
            modal.open({content: data});}); 
      e.preventDefault(); 
     }); 
+0

哦好吧谢谢我也会尝试! –

+0

如果有效,请标记为正确答案 – Shane