带有动态ajax内容的jsp页面中的jquery模式框

Question

我想根据页面点击的 tr 元素使用 jquery 创建模态弹出框。

但我无法将 jquery 用于此目的。

tr 的结构是<tr><td><a><image></image></a></td></tr> 每个元素发送我的带有id 的jsp 页面。 （比如说<a href ="target.jsp?id=<dynamic_id_here>">

我应该怎么做才能在同一页面上向用户显示 target.jsp 的结果并带有模态弹出窗口？

提前谢谢..

Answer 1

这就是我的处理方式......

对于模态对话框，我真的推荐使用“JQuery UI”，它带有一个漂亮的模态对话框。

http://jqueryui.com/demos/dialog/#modal

对于 ajax 调用，您需要的大部分内容已经在 jQuery 中了：

http://api.jquery.com/jQuery.ajax/

因此，简而言之，您将在页面上不可见的某个位置创建一个 div，准备接收您的文本：

<div style='display:none'>
  <div id="dialog-modal" title="Basic modal dialog">
    <p>Loading</p>
    </div>
<div>

您需要使锚看起来像这样。

对于 custom_id = 123：

<a href='#' id='anchor_123'>

然后，要启动对话框，您需要在脚本标签中包含类似的内容。

$( "#anchor_123" )
.click(function() {
    $( "#dialog-modal" ).dialog({
        height: 140,
        modal: true
    });
            $.ajax({
                    url: "target.jsp?id=123",
                    success: function(data){
                        $('#dialog-modal p').html(data);
                    }
            });

    });

我将留给您研究如何在 jquery 中动态设置 custom_id。这应该会让你上路。

HTH