如何用圖像和文本打開Jquery UI對話框

Question

我是JQuery UI的新手。我試圖打開jquery對話框中的圖像和文字從現有的代碼中的一個div標籤的代碼。我的代碼是

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    $(".peter_pic").click(function(){ 
 
    $(".peter").dialog("open"); 
 
    }); 
 
    $(".peter").dialog({ autoOpen: false }); 
 
}); 
 
$(window).load(function() { 
 
     $(".peter").hide(); 
 
    }); 
 
</script> 
 

 
<div class="Table" style="display: table;" > 
 
<div style="display: table-row;"> 
 
<div style="display: table-cell;" class = "test"> 
 
<img class = "peter_pic" src="someimage.jpg" /> 
 
<div data-role="popup" class="peter"> 
 
Display some text. Display some text. Display some text. 
 
</div> 
 
</div> 
 
</div> 
 
</div>

Answer 1

我想通了，我自己有關解決方案。

我添加了多個img標籤。這解決了這個問題。

<div class="Table" style="display: table;" > 
 
<div style="display: table-row;"> 
 
<div style="display: table-cell;" class = "test"> 
 
<img class = "peter_pic" src="someimage.jpg" /> 
 
<div data-role="popup" class="peter"> 
 
<img class = "peter_pic" src="someimage.jpg" /> 
 
Display some text. Display some text. Display some text. 
 
</div> 
 
</div> 
 
</div> 
 
</div>