在JQuery UI对话框中加载aspx页面

Question

我有一个aspx页面,我有一个linkbutton,点击该链接按钮后,我调用另一个aspx页面在弹出窗口中传递一个参数,如下所示:

<asp:linkbutton id='lbtn1' onClick=<%#"window.open('/testsite/mypage.aspx?param=abcd');return false"%> 

直到现在它工作正常,但现在我必须将我的页面包含到另一个网站,他们使用JQuery弹出对话框,并要求我使用相同的方式加载我的页面.

我是JQuery的新手并且不知道.我试着通过这个论坛和谷歌搜索,但没有运气.

有人可以帮助我,并告诉我如何实现这一点(请不要介意,但代码示例将非常感激).

非常感谢.

Answer 1

你的意思是通过iframe将页面加载到模态/灯箱样式中吗？尝试使用灯箱插件或阅读jQuery UI对话框.

如果您决定使用jQuery UI对话框,则可以执行以下操作:

<div id="dialog">
<iframe src="page.html"></iframe>
</div>
...
$( "#dialog" ).dialog();

Answer 2

还有另一种方法,但是对于模态弹出窗口而言,iframe似乎是一个完全合法的解决方案.但是您可以使用ajax查询加载目标页面的所有html,并使用它填充模式对话框.使用jQuery:

    <script type="text/javascript">
    function showPanel(panelID) 
    {
         $panel = $('#'+panelID);
         $.ajax({
                url: "/testsite/mypage.aspx",
                type: "GET",
                dataType: "html",
                async: false,
                data: { "param": "abcd"
                },
                success: function (obj) {
                    // obj will contain the complete contents of the page requested
                    // use jquery to extract just the html inside the body tag
                    $content=$(obj).find('body').html();
                    // then update the dialog contents with this and show it
                    $panel.html($content);
                    $panel.dialog();
                }
         });
    }
    </script>
<div id="dialog">
</div>

然后使用面板的id从您的click事件中调用它.

<asp:LinkButton id="lbtn1" onClick="showPanel('dialog');return false;" />

注意:虽然这可能会起作用,但如果你只想在客户端上做一些链接LinkButton,那就没有意义,因为根据定义它是一个回发控件.因此,如果您希望将其呈现为出于样式原因的超链接,请使用HyperLink控件或仅使用HTML链接.如果没有,只需在链接文本或内容周围放置"div"或"span",并使用jQuery向其添加单击事件.在SO上有很多关于这类事情的讨论.