打开aspx页面作为模式弹出窗口

时间:2011-08-04 12:22:10

标签: asp.net modality

我有一个带编辑选项的网格,在编辑按钮上单击我需要重定向到编辑页面。 要求是将此编辑页面设置为背景(上一页)灰色的弹出窗口。

我尝试过模态弹出窗口,但控件位于单独的页面上。

我尝试使用面板和iframe进行模态弹出:这个工作..但是另一个问题出现了。我需要关闭'SAVE'或'取消'按钮点击页面。这些控件将在编辑页面上而不是在上一页。感谢任何帮助。

由于 拉雅

5 个答案:

答案 0 :(得分:4)

我强烈建议使用用户控件,因为它对你来说更方便管理,没有必要为它创建整个页面bcz modal popup使用ajax请求并且如果你尝试在其中加载页面然后你必须做表格发布...不使用ajax请求或表格回复...

加上我正在寻找你问题的答案,我看到了这篇文章:

  

您可以使用Modal Popup Extender打开页面的某些部分   弹出。但是我们没有任何属性可以打开其他html或aspx   弹出窗口中的页面。

http://wiki.asp.net/page.aspx/1378/open-different-page-using-ajax-modal-popup-extender-control/

并且还发现人们提出了与您相同的问题以及他们得到的答案就在这里

  

使用iframe或用户控件

Is there a way to open another page using ModalPopup Extender?

我建议修改你的设计,因为它没有任何伤害,相反它会更有帮助......

希望这有帮助...

答案 1 :(得分:2)

我多次使用AJAX Control Toolkit中的Modal Popup Control并取得了很好的成功: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx

答案 2 :(得分:1)

只是一个想法但是如何使用jquery“contents()”函数?

您可以设置一个间隔,以便从父页面中查找iframe中的元素。 (您正在使用.net,因此您可以在iframe的页面上回传时显示。)

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="admin_test" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>    
    <script>
        $(function () {

            var watchForClose = setInterval(function () {
                if ($('#testIframe').contents().find('#closeModal').length > 0) {
                    clearInterval(watchForClose);
                    /* call function to close modal here..*/
                    alert('Close modal');
                };
            }, 100);

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <iframe id="testIframe" src="Default.aspx" width="300" height="300"></iframe>
    </div>
    </form>
</body>
</html>

以上是在iframe页面中查找id为“closeModal”的元素。当该元素出现时,您可以调用模态的关闭函数,(只需用调用替换警报)。

答案 3 :(得分:1)

如果您使用的是Bootstrap Modal,则可以将iframe添加到模式主体中,并将​​页面的网址加载到其中。

<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
            </div>
            <div class="modal-body" id="content">
                <iframe src="your new page url">
            </div>
        </div>
    </div>
</div>

答案 4 :(得分:0)

我们可以使用IFrame打开一个aspx作为弹出窗口,如下所示,

首先按一下按钮并按如下方式提供onclick事件

   <input id="btnSymbol" type="button" value="..." onclick="OpenMyPopUp()" runat="server"/> 

下一步在页面中提供ID为“Div”的标签,如下所示

   <div id="MyDialog">
        </div>

然后在下面找到两个采用当前URL的方法,并使用IFRAME在弹出窗口中打开一个aspx页面

    function OpenMyPopUp(){openPopup('OpenPage.aspx', 530, 800, 'Page Title');}

四个参数发送如下URL,高度,宽度,标题

   function openPopup(url, h, w, t) {
if (url != null && h != null && w != null && t != null) {

    urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
    url = urlBase + url;
    $('#MyDialog').html('<iframe border=0 width="100%" height ="100%" src="' + url + '"> </iframe>');
    $("#MyDialog").dialog({
        title: t,
        modal: true,
        autoOpen: true,
        height: h,
        width: w,
        resizable: false,
        position: ['right-10', 'top+30'],
        closeOnEscape: false,
        dialogClass: "alert"
    });
}}