Modal Popup in Custom User Control

I'm creating a DotNetNuke Module (DNN v4.5.3).

I've successfully added the Modal Popup into the module, but when i open it up it doesn't center on the screen (it centers to the control, which partically makes sense), also the background Styles do no apply themselves when the modal is being shown.

Has anyone ran into this issue before?

Thanks in advance for any replys, i'll update this post if i figure things out.

SyntaxC4

I messed around with the positioning of this control forever yesterday. I could not get it to work either. I'm also using DNN 4.5.3. If you find a solution, please post it!

Thanks.

Hi SyntaxC4,

My understanding of your issue is that your ModalPopupExtender doesn't shown on the center of the screen and also it has css issues.If I have misunderstood, please feel free to let me know.

Please make sure that the ModalPopupExtender is not located in a frame or IFame. If the ModalPopupExtender is inside a IFame, it will shown at the center of the IFrame instead of the screen.

The css issue, you can refer to the samples which contains in the Ajax Control Toolkit's source code. Here is the section:

/*Modal Popup*/
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

I hope this help.

Best regards,

Jonathan

Thanks for the reply Jonathan, I should have included some code so i will do that now.

<ASP_CODE>

<asp:ModalPopupExtender ID="AddPopUp" runat="server" TargetControlID="AddRangeOpen" PopupControlID="AddRange" CancelControlID="AddCancel" PopupDragHandleControlID="AddRangeHandle" BackgroundCssClass="modalBG" /><asp:Panel ID="AddRange" runat="server" Style="display:none;" CssClass="modalWindow"> <table> <tr> <td colspan="2"> <asp:Panel ID="AddRangeHandle" runat="server" CssClass="title"> <asp:Label ID="HandleLabel" runat="server" Text="Add Shipping Range" /> </asp:Panel> </td> </tr> <tr> <td><asp:Label ID="RangeStartLabel" runat="server" Text="Range Start:" AssociatedControlID="RangeStart" /></td> <td><asp:TextBox ID="RangeStart" runat="server" /></td> </tr> <tr> <td><asp:Label ID="RangeStopLabel" runat="server" Text="Range Stop:" AssociatedControlID="RangeStop" /></td> <td><asp:TextBox ID="RangeStop" runat="server" /></td> </tr> <tr> <td><asp:Label ID="RangeValueLabel" runat="server" Text="Range Value:" AssociatedControlID="RangeValue" /></td> <td><asp:TextBox ID="RangeValue" runat="server" /></td> </tr> <tr> <td colspan="2"><asp:CheckBox ID="isRangePercent" runat="server" Text="Percentage:" TextAlign="Left" /></td> </tr> <tr> <td colspan="2"><asp:CheckBox ID="isActive" runat="server" Text="Active:" TextAlign="Left" /></td> </tr> <tr> <td colspan="2" align="right"><asp:Button ID="AddSave" runat="server" Text="Save" OnClick="AddSave_Click" /><asp:Button ID="AddCancel" runat="server" Text="Cancel" /></td> </tr> </table></asp:Panel>

</ASP_CODE>

<CSS_STYLES>

/************************//****/ AJAX MODAL/****//************************/.modalBG{ background-color: #666; Filter:alpha(opacity=70); opacity:0.7;}.modalWindow{ background-color: #FFF; border: solid3px #333; padding:3px;}.title{ background-color: #5D7B9D; color: #FFF; font-weight:bold; text-align:center;}

</CSS_STYLES>

This code is in a Control, not a page. I think this is what is causing the issue. As the modal pops up within the confinements of the control and not to the center of the page.

Thanks for any more information in advance.

SyntaxC4

I've had this same issue and I believe you can add this to your stylesheet.

.modalWindow

{
 background-color: #FFF;
 border: solid3px #333;
 padding:3px;
 position: absolute;
 left: 50%;
 top: 50%;
}

I'm not sure if you need the position: absolute; or not though.

sstewart:

I've had this same issue and I believe you can add this to your stylesheet.

.modalWindow

{
 background-color: #FFF;
 border: solid3px #333;
 padding:3px;
position: absolute;
left: 50%;
top: 50%;
}

I'm not sure if you need the position: absolute; or not though.

I've added the underlined lines into my css document and it didn't have an effect on my modal popup. It's still not graying the background, i know these styles work as i've made other ASP.net sites with them, but DotNetNuke doesn't seem to be happy with AJAX.

I'm still trying to work this issue out, i'll post a solution if i come across one, but help is still appretiated.

Thanks to all that replied

SyntaxC4

Modal PopUp with Custom User Control

I'm using the September preview to create a modal pop up. But the twist here is that I would like the popup toload in a custom page.
In my case, the sample file, TrackingNumber.ascx, is to be displayed when the modal popup is displayed.

It mostly works. If the OK or Exit buttons are clicked, the popup closes normally.
When the Save button is clicked,however, information is written to the database, and the label shows the time when the button was clicked,butnow the OK and Exit buttons stop working.

Any suggestions as what I am doing wrong? Is there a better way to encapsulate user controls in a modal pop up?
Thanks!

default2.aspx:

<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@dotnet.itags.org. Register src="http://pics.10026.com/?src=TrackingNumber.ascx" TagName="TrackingNumber" TagPrefix="uc1" %>

<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Test Modal PopUps With Custom User Controls</title>

<link href="http://links.10026.com/?link=ModalPopUp.css" rel="stylesheet" type="text/css" />

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />

</head>

<body>

<form id="form1" runat="server">

<div>

<AtlasToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" >

<AtlasToolkit:ModalPopupProperties

TargetControlID="LinkButton1"

PopupControlID="UpdatePanel1"

BackgroundCssClass="modalBackground"

DropShadow="True"

OkControlID="TrackingNumber1$OkButton"

CancelControlID="TrackingNumber1$CancelButton"

/>

</AtlasToolkit:ModalPopupExtender>

<asp:LinkButton ID="LinkButton1" runat="server" Style='z-index: 102; left: 304px;

position: absolute; top: 14px">LinkButton</asp:LinkButton>

<atlas:UpdatePanel ID="UpdatePanel1" runat="server" >

<ContentTemplate>

<uc1:TrackingNumber ID="TrackingNumber1" runat="server" />

</ContentTemplate>

<Triggers>

<atlas:ControlEventTrigger ControlID="TrackingNumber1$btnSave" EventName="Click" />

</Triggers>

</atlas:UpdatePanel>

</div>

</form>

<script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<references>

</references>

<components>

</components>

</page>

</script>

</body>
</html>

TrackingNumber.ascx:
<%@dotnet.itags.org. Control Language="VB" AutoEventWireup="true" CodeFile="TrackingNumber.ascx.vb" Inherits="TrackingNumber" EnableViewState="true" %>

<asp:Panel ID="PanelTrackingNumber" runat="server" BackColor="#DAE8F4" Font-Bold="True" Height="173px"

Style='z-index: 104; position: relative;" Width="285px" >

<asp:TextBox ID="txtTrackingNumber" runat="server" Style='z-index: 100; left: 40px;

position: absolute; top: 83px"></asp:TextBox>

<asp:Label ID="Label1" runat="server" Font-Bold="False" Style='z-index: 101; left: 28px;

position: absolute; top: 53px" Text="What is the tracking Number?"></asp:Label>

Tracking number of tracking cover sheet for records.

<asp:Label ID="Label10" runat="server" ForeColor="Red" Height="10px" Style='z-index: 102;

left: 212px; position: absolute; top: 55px" Text="*" Width="13px"></asp:Label>

<asp:Label ID="Label13" runat="server" ForeColor="Red" Style='z-index: 103; left: 8px;

position: absolute; top: 149px" Text="* Optional"></asp:Label>

<asp:Button ID="OkButton" runat="server" Style='z-index: 104; left: 10px; position: absolute;

top: 115px" Text="OK" />

<asp:Button ID="CancelButton" runat="server" Style='z-index: 105; left: 98px; position: absolute;

top: 145px" Text="Exit" />

<asp:Button ID="btnSave" runat="server" Style='z-index: 106; left: 59px; position: absolute;

top: 111px" Text="Save" />

<asp:Label ID="lblNow" runat="server" Style='z-index: 108; left: 112px; position: absolute;

top: 111px" Text="Label" Width="119px"></asp:Label>

</asp:Panel>

TrackingNumber.ascx.vb:

Imports System.Data.SqlClient

Partial Class TrackingNumber

Inherits System.Web.UI.UserControl

Protected Sub WriteToDB()

Dim oCon As SqlConnection

Dim oComm As SqlCommand

oCon = New SqlConnection("server=MODREP1;database=SAP_DB;uid=UserId;pwd=xxxx;")

oCon.Open()

oComm = New SqlCommand("UPDATE Records SET Data='" & Now.ToLongTimeString & "' WHERE ID=4", oCon)

oComm.ExecuteNonQuery()

oComm.Dispose()

oCon.Dispose()

End Sub

Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click

WriteToDB()

Me.lblNow.Text = Now.ToLongTimeString

End Sub

End Class

ModalPopUp.css:
/*Modal Popup*/

.modalBackground {

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopup {

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:250px;

}

I tried placing the ModalPopupExtender tag inside the UpdatePanel. I've tried placing the ModalPopupExtender in the .ascx file, and with & with out the Panel elements. In the lastest configuration, clicking the OK and Exit buttons causes the popup to close normally. But when the Save button is clicked to perform server side processing, the following happens:

data is written to the database (desired effect)

The error is probably because the postback within the UpdatePanel stomps the relevant DOM elements and then the event handlers ModalPopup set up are gone. You might try sticking the ModalPopupExtender tag inside the UpdatePanel, too, as this often helps.
One other thing people sometimes have success with is wrapping the Save button in an UpdatePanel.

I don't know if you have fixed this issue, or if you even look again, but in your server-side code you can call ModalPopupExtender1.Show();

which will display the modal dialog box after the post back.