如何以模态弹出窗口的形式打开 aspx 页面答案

【问题标题】：How to open a aspx page as Modal popup如何以模态弹出窗口的形式打开 aspx 页面
【发布时间】：2014-04-15 05:00:13
【问题描述】：

如何打开一个 aspx 页面作为模态弹出窗口。

Test.aspx 应该像模式弹出窗口一样打开。
让Test1.aspx 有一个按钮。单击它应该将 Test.aspx 页面填充为模态弹出窗口。

这是我的按钮：
```
<asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" />
```

注意：Test.aspx：普通 aspx 页面，但 Test1.aspx：父页面包含母版页。

【问题讨论】：

您想在弹出窗口中将其作为“模式对话框”在单独的窗口中打开吗？

标签： asp.net vb.net modal-dialog

【解决方案1】：

如果您想将其作为 jQuery 模型对话框打开，请参阅 this 帖子

否则，如果您想在模态对话框中打开此页面，您可以使用以下代码将其打开。本示例使用 javascript 的 window.showModalDialog 方法。具体使用方法可以参考here。

      <script>
        function fnRandom(iModifier) {
          return parseInt(Math.random() * iModifier);
        }

        function fnSetValues() {
          var oForm = document.getElementById('oForm');
          var iHeight = oForm.oHeight.options[oForm.oHeight.selectedIndex].text;

          if (iHeight.indexOf("Random") > -1) {
            iHeight = fnRandom(document.body.clientHeight);
          }

          var sFeatures = "dialogHeight: " + iHeight + "px;";
          return sFeatures;
        }

        function fnOpen() {
          var sFeatures = fnSetValues();
          window.showModalDialog("test.aspx", "", sFeatures)
        }
      </script>

【讨论】：

window.showModalDialog 在 IE 或 Chrome 中不再受支持。并且可能很快会在 Firefox 中被弃用。见here

【解决方案2】：

使用ClientScript.RegisterStartupScript，试试这个

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)

        Dim query As String = "test.aspx" 
        Dim newWin As String = "window.open('" & query & "');"
        ClientScript.RegisterStartupScript(Me.GetType(), "pop", newWin, True)

End Sub

【讨论】：

【解决方案3】：

您可以使用如下所示的模态弹出扩展器。

<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>

参考：http://www.c-sharpcorner.com/UploadFile/cd7c2e/open-a-new-web-form-in-the-model-popup-of-Asp-Net-applicatio/

或者你可以使用 jquery 打开一个带有 asp.net 之类的模式对话框。

$(document).on("click", "#LoadDialogButton", function () {

var url = "DialogContentPage.aspx";
var divId = " #MainContentDiv";

var q1 = "?inp1=" + $("#Input1").val();
var q2 = "&inp2=" + $("#Input2").val();

url = url + q1 + q2 + divId; //url in the form 'DialogContentPage.aspx?inp1=xx&inp2=yy #MainContentDiv'

$('<div id=DialogDiv>').dialog("destroy");

$('<div id=DialogDiv>').dialog({
    dialogClass: 'DynamicDialogStyle',
    modal: true,
    open: function () {
        $(this).load(url);           
    },
    close: function (e) {
        $(this).empty();
        $(this).dialog('destroy');
    },
    height: 350,
    width: 540,
    title: 'Dynamic Dialog'

});

});

参考：http://www.codeproject.com/Articles/488312/jQuery-Modal-Dialog-with-Dynamic-Content

【讨论】：

【解决方案4】：

试试这个简单的javascript在新窗口/popup中打开aspx页面

window.open("http://www.google.com/");
window.open("~/mypage.aspx");

或

ScriptManager.RegisterStartupScript(Page, typeof(Page), "OpenWindow", "window.open('YourPage.aspx?Param=" + ParamX.ToString() + "');",true);

或者如果你有一个按钮，你可以如下使用它：

Button1.OnClientClick="javascript:window.open('YourPage.aspx?Param=" + ParamX.ToString() + "');";

希望这将帮助您以其他方式使用 Ajax 模式弹出窗口。

【讨论】：