开发者

How to use ajax to show php in a modal pop up

开发者 https://www.devze.com 2023-01-31 02:58 出处:网络
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:

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 - .cs开发者_如何学编程s({'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()

0

精彩评论

暂无评论...
验证码 换一张
取 消