如何使用Ajax在模式弹出窗口中显示php [英] How to use ajax to show php in a modal pop up

问题描述

你好:)我试图弄清楚我如何通过ajax在我使用的jquery脚本中获取一些内容.我试图根据自己的需要自定义此脚本，它的脚本很简单:

$('a.poplight[href^=#]').click(function() {
 var popID = $(this).attr('rel'); //Get Popup Name
 var popURL = $(this).attr('href'); //Get Popup href to define size

 //Pull Query & Variables from href URL
 var query= popURL.split('?');
 var dim= query[1].split('&');
 var popWidth = dim[0].split('=')[1]; //Gets the first query string value

 //Fade in the Popup and add close button
 jQuery('#' + popID).fadeIn(200).css({ 'width': Number( popWidth ) });


 //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding
 var popMargTop = ($('#' + popID).height() + 80) / 2;
 var popMargLeft = ($('#' + popID).width() + 80) / 2;

 //Apply Margin to Popup
 jQuery('#' + popID).css({
     'margin-top' : -popMargTop,
     'margin-left' : -popMargLeft
 });

 //Fade in Background
 $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
 $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) IE

 return false;


});

 //Close Popups and Fade Layer
 $('a.close, #fade, .cancel').live('click', function() { //When clicking on the close or fade layer...
     $('#fade , .popup_block').fadeOut(function() {
         $('#fade, a.close').remove();  //fade them both out
      $('form').clearForm();
 });
     return false;
 });

它正在调用一个隐藏的div.我想只调用一个php文件，该文件包含所有内容.这就是html的样子:

<a href="#?w=480" rel="whatever" class="poplight"><input type="button" class="button" value="update"/></a>

有什么想法吗?提前谢谢:)

好吧，我尝试了jQuery UI的对话框...我必须说，这有点令人沮丧... 我知道很难遵循别人的编码，但是实际上我可以调整几乎所有内容，除了如何使用该代码来获取数据并在弹出窗口中显示数据之外，因为href调用的是模式尺寸，而不是任何实际内容

所以我回到了这个大声笑

解决方案

为什么不使用jquery ui的模式对话框代替(良好的代码质量).然后，您可以通过 $ .get()

获得内容

hello there :) Im trying to figure out how i can grab some content via ajax in an jquery script im using. Im trying to customize this script to suit my needs, its pretty straight forwrd:

$('a.poplight[href^=#]').click(function() {
 var popID = $(this).attr('rel'); //Get Popup Name
 var popURL = $(this).attr('href'); //Get Popup href to define size

 //Pull Query & Variables from href URL
 var query= popURL.split('?');
 var dim= query[1].split('&');
 var popWidth = dim[0].split('=')[1]; //Gets the first query string value

 //Fade in the Popup and add close button
 jQuery('#' + popID).fadeIn(200).css({ 'width': Number( popWidth ) });


 //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding
 var popMargTop = ($('#' + popID).height() + 80) / 2;
 var popMargLeft = ($('#' + popID).width() + 80) / 2;

 //Apply Margin to Popup
 jQuery('#' + popID).css({
     'margin-top' : -popMargTop,
     'margin-left' : -popMargLeft
 });

 //Fade in Background
 $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
 $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) IE

 return false;


});

 //Close Popups and Fade Layer
 $('a.close, #fade, .cancel').live('click', function() { //When clicking on the close or fade layer...
     $('#fade , .popup_block').fadeOut(function() {
         $('#fade, a.close').remove();  //fade them both out
      $('form').clearForm();
 });
     return false;
 });

It's calling a div which is hidden. i woukd like to just call a php file, which holds all of the contents instead. this is what the html looks like:

<a href="#?w=480" rel="whatever" class="poplight"><input type="button" class="button" value="update"/></a>

any ideas? Thanks ahead of time :)

Ok, I tried jQuery UI's dialog...and i must say, It's kinda frustrating... i know it's difficult to follow someones elses coding, but i actually can tweak pretty much everything except how to use this code to fetch data and show it in the pop up since the href is calling the modal size, and not any actual content

so im back to this one lol

解决方案

Why don't you use jquery ui's modal dialog instead(good code quality). Then you get content via $.get()

这篇关于如何使用Ajax在模式弹出窗口中显示php的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！