使用jQuery打開點擊事件的圖像彈出窗口

有一個用戶界面，我想打開一個圖像的彈出窗口，如果我點擊一些文本稱爲更多信息鏈接.. 我想寫下一些東西在那個圖像上。我試圖這樣做，但我不能夠做到這一點。任何建議，將感激.. 到目前爲止，我已經做到了這一點.. 這是我的詳細信息的鏈接使用jQuery打開點擊事件的圖像彈出窗口

<a href="#?w=700" rel="popup2" class="poplight"> 
        <div class="meta"> 
        <div class="show-more-info">+ More Info</div> 
        </div> 
        </a>

，我需要打開如果我點擊更多信息標籤，圖像的popupwindow。我需要寫下一些東西。通過這個腳本，我可以打開彈出窗口，但我需要打開附近的更多信息鏈接的圖像。

<script type="text/javascript"> 

$(document).ready(function(){         

    //When you click on a link with class of poplight and the href starts with a # 

    $('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 

     $('#' + popID).fadeIn().css({ 'width': Number(popWidth) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>'); 



     //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css 

     var popMargTop = ($('#' + popID).height() + 80)/2; 

     var popMargLeft = ($('#' + popID).width() + 80)/2; 



     //Apply Margin to Popup 

     $('#' + 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 



     return false; 

    }); 





    //Close Popups and Fade Layer 

    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer... 

     $('#fade , .popup_block').fadeOut(function() { 

      $('#fade, a.close').remove(); 

    }); //fade them both out 



     return false; 

    }); 





}); 

</script>

來源

2011-06-16 ferhan

你有什麼'嘗試過'？ – Neal 2011-06-16 17:28:50

您是否嘗試過使用Google - http://cl.ly/7fPy？你也需要告訴我們你試過了什麼。 – 2011-06-16 17:30:58

@Neal，@Tom Walters，我已經更新了這個問題...... – ferhan 2011-06-16 17:36:45

類似這樣？

小提琴：http://jsfiddle.net/2eZcd/

來源

2011-06-16 18:33:26 kei

非常感謝，是的，這是我需要的方式，但有沒有什麼辦法可以使用jQuery而不是通過使用html來添加圖像上的內容.. – ferhan 2011-06-16 18:40:46

更新：http://jsfiddle.net/2eZcd/1/ ：D – kei 2011-06-16 18:52:49

使用jQuery打開點擊事件的圖像彈出窗口

回答

相關問題