0 
<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)

ダイアログ div にも画像を含めると、ページの読み込みのみで画像が読み込まれるため、ぎこちなく見えます。

あなたが UI の専門家であるため、これがリッチ Web サイトに POP アップを表示するためのより良い方法ではない場合、最善の方法を教えてください。ライト ボックスが私の要件に合っているかどうかわかりません。提案してください。前もって感謝します

4

1 に答える 1

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');
});​

また、私があなたの質問を誤解していなければ、このプラグインはあなたが探しているものです.

于 2012-04-23T15:57:01.197 に答える