Dialog Widget-如何弹出点击的图像?

时间:2014-03-12 13:04:40

标签: javascript jquery

我正在使用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>

我需要打开被点击的同一元素的对话框

2 个答案:

答案 0 :(得分:1)

这有效

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");
  });
}); 

答案 1 :(得分:0)

尝试:

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