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