如何打開aspx頁面作爲模態彈出框

Question

如何打開aspx頁面作爲模態彈出框。

1. Test.aspx應該像模態彈出框一樣打開。

2. 讓Test1.aspx有一個按鈕。點擊它應該將Test.aspx頁面填充爲Modal彈出窗口。

   這裏是我的按鈕：

   <asp:Button ID="Button1" runat="server" Text="Fill Form in Popup" /> 
   

注：Test.aspx文件中：普通的aspx頁面，但Test1.aspx：家長的網頁是否包含母版頁。

Answer 1

使用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 

Answer 2

您可以使用模式彈出擴展像下面。

<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

Answer 3

試試這個簡單的JavaScript在新窗口中打開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模式彈出窗口。

Answer 4

如果你想打開這個作爲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>