Question

<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<%
String str ="Ravi";
%>
 <script>
function changeIt(_src)
{
  $("#dialog").dialog();
}
 </script>

</head>
<body >
<img onclick="changeIt(this)" src='Cham/ravi.jpg' name='myimage' height ="100" width="100"  />
<div id="dialog" title="Dialog Title">
The Name is <%=str%>
<img  src='Cham/ravi.jpg' name='myimage' height ="1000" width="1000"  />
</div>
</body>
</html>

嗨，

在页面启动时，在AJAX调用中，我在文件夹中有一些图像，我将获取这些路径并在UI页面上显示它们。

现在，在UI页面上单击该图像，我正在尝试显示一个Jquery对话框，其中必须包含与该图像详细信息相关的数据库中的一些数据以及更大尺寸的图像（已单击）。（基本上是POP UP）

当我将图像也包含在对话框中时，由于图像仅在页面加载时加载，因此看起来很笨拙。

如果这不是在富网站上显示POP ups的更好方法因为你们是UI专家，你能否告诉我什么是最好的方法？我不确定灯箱是否适合我的要求，请建议我。提前致谢

Answer 1

我真的不明白你的问题，但至少我想在这里帮忙......

要修复代码，以下是工作示例。不要忘记在你的页面中包含jqueryUI。

<img class="thumbnail" src='Cham/ravi.jpg' name='myimage' height ="100" width="100"  />

<div id="dialog" title="Dialog Title">
The Name is <%=str%>
<img  src='Cham/ravi.jpg' name='myimage' height ="1000" width="1000"  />
</div>

$(document).ready(function(){
    $('#dialog').dialog({autoOpen :false});
});

$('.thumbnail').on('click', function() {
    $('#dialog').dialog('open');
});

另外，如果我没有误解你的问题，this plugin就是你在寻找什么。

使用JQuery Dialogue显示弹出屏幕

1 个答案: