對話框小工具 - 如何彈出點擊的圖像？

我正在使用JQuery-Dialog Widget。我想在彈出窗口中顯示點擊圖像。但是用我的代碼，第一次使用這個小部件時無法完成。下面是我的代碼對話框小工具 - 如何彈出點擊的圖像？

<html> 
<head> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
</head> 
<body> 
<ul> 
<li id="child"><img src="images/child1/image.jpg" /></li> 
</ul> 

<script> 
$('li[id="child"]').dialog({autoOpen: false}); 
$('li[id="child"]').click(function() { 
$('li[id="child"]').dialog("open"); 
}); 
</script> 
</body> 
</html>

我需要打開它被點擊同一元素的對話框

來源

2014-03-12 SIBHI S

'$（「禮[ID =」孩子「]'）'應該是'$（」＃child「）'。 – Barmar

你只需將你的代碼包裝在'doc ready'中即可。 – Jai

這工作

Live Demo

$(function(){ 
    $("body").append('<div id="dialog"/>')  
    $("#dialog").dialog({ 
    height:400, width:500, modal: true, autoOpen:false 
    }); 
    $('#child > img').on('click', function() { 
    $("#dialog").html($('<img />', {src:this.src})); 
    $("#dialog").dialog("open"); 
    }); 
});

來源

2014-03-12 13:31:30 mplungjan

它工作良好。但是當我關閉彈出窗口時，原始圖像從頁面中消失。如何讓我的形象留在頁面中？ –

查看更新 - 我解決了它 – mplungjan

是的！它工作很好。非常感謝。 –

嘗試：

<script> 
$(function(){ 
    $('#child > img').on('click', function() { 
     $(this).dialog('open'); 
    }); 
    $('#child > img').dialog({autoOpen: false}); 
}); 
</script>

來源

2014-03-12 13:07:15 chris

它沒有工作！ –

此代碼使圖像消失 – mplungjan

對話框小工具 - 如何彈出點擊的圖像？

回答

相關問題