動態加載模態內的圖像

Question

以下是我的代碼。我正試圖加載模式中的圖片。該圖片存在於網頁上，我可以獲得源代碼。有沒有辦法簡單地加載圖像到點擊模式，因爲我正在嘗試在這裏做？我可以點擊一張圖片並提醒消息來源;但是當我嘗試將源代碼插入函數時，什麼都沒發生。

我使用ZEND，但我不認爲這與手頭的情況有關，所以我沒有用ZEND標籤標記問題。

任何人都可以解釋我需要做什麼才能加載我的圖像在點擊MODAL嗎？

<?php 
    $this->headLink()->appendStylesheet($this->baseUrl('css/default/index/designbox.css')); 
    $this->jQuery()->onLoadCapturestart(); 
?> 
<!-- Modal Done Here --> 
$('.boxDES').click(function() { 
    pic1 = document.getElementById(this.id).getAttribute('src'); 
    alert(pic1); 

    $(pic1).dialog(
     { 
      modal:  true, 
      draggable: false, 
      title:  'Designs', 
      height:  'auto', 
      width:  'auto', 
      open:  function(){ 
          jQuery('.ui-widget-overlay').bind('click',function(){ 
           jQuery(pic).dialog('close'); 
          }) 
         } 
     } 
    ); 
}); 
<?php $this->jQuery()->onLoadCaptureEnd(); ?> 
<div id="designGroup"> 

    <div id="title"> 
     <?php echo strtoupper($this->object->GetType()); ?> 
    </div> 

    <div id="boxText"> 
     <?php echo $this->object->GetDescription(); ?> 
    </div> 

    <?php $links = $this->object->GetLinks(); ?> 
    <div id="pictureBox"> 
     <ul id="grid"> 
      <li> 
       <a href="#"> 
        <img id="<?php echo $links[0];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[0]; ?>"></a> 
      </li> 
      <li> 
       <a href="#"> 
        <img id="<?php echo $links[1];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[1]; ?>"></a> 
      </li> 
      <li> 
       <a href="#"> 
        <img id="<?php echo $links[2];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[2]; ?>"></a> 
      </li> 
      <li> 
       <a href="#"> 
        <img id="<?php echo $links[3];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[3]; ?>"></a> 
      </li> 
     </ul> 
    </div> 
    <div style="clear: both;"> </div> 
</div> 

Answer 1

This is how to build a variable that holds my IMG. 

var catIMG = $('<img/>', { 
           "class" :"inline", 
           src:pic1 
         }); 

以下是目前固定和完整JSCRIPT -

$('.boxDES').click(function() { 
    pic1 = document.getElementById(this.id).getAttribute('src'); 
    var catIMG = $('<img/>', { 
         "class" :"inline", 
         src:pic1 
       }); 

    $(catIMG).dialog(
     { 
      modal:  true, 
      draggable: false, 
      title:  'Designs', 
      height:  'auto', 
      width:  'auto', 
      open:  function(){ 
          jQuery('.ui-widget-overlay').bind('click',function(){ 
           jQuery(pic).dialog('close'); 
          }) 
         } 
     } 
    ); 
}); 

我能在這裏找到該信息https://stackoverflow.com/a/10788966/1583066