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 window (asp.net ajax page) not closing

Hello, I'm creating a pop up using 'window.showModalDialog', the page that opens is a asp.net ajax page. I'm displaying a gridview on this. When user selects a row from the gridview, i need to store the selected value to session variable and close the popup window. I'm using the below code on the select image button click. If i manually closes the popup window, it get backs to the parent. The code on click event is

ProtectedSub OnSelect(ByVal senderAsObject,ByVal eAs CommandEventArgs)

Dim strScriptAsString ="<script language='javascript'>window.returnValue='" + retVal +"';window.close();</script>"

If (e.CommandName.Equals("cmdSelTag"))Then

Session(Utility.Constants.SelectedTagDefinitionId) = e.CommandArgument.ToString()

IfNot ClientScript.IsStartupScriptRegistered("clientScript")Then

ClientScript.RegisterStartupScript(GetType(Page),"clientScript", strScript)

EndIf

EndIf

EndSub

Note: If make it asp.net page rather than asp.net ajax page, then this works fine.

Any help is appreciated.

Hi.. i used ScritManager.RegisterStartupScript instead of ClientScript.RegisterStartupScript. Now its working.

ModalPopup and <SELECT>

Is there any way that ModalPopup would render properly on top of <select> html element, rather then creating a manual work around? I used my own popup server control that rendered iframe in the background, applying filter. But no shaddow. That's why ModalPopup seems to be more interesting solution, but this selection in the background...
Thank you for answers.I'm not sure I understand your question, but I think you're referring to the z-order behavior of SELECT elements in IE (and maybe FireFox, I'm not sure). If that's the case, unfortunately, no, there is no way to get things to appear over the top of them.

Thank you for reply.

But why won't Atlas implement an iframe to be rendered rather than a div (for the background) and this way the z-index problem with certain controls would be solved? IE6 is widely used and will be used by many customers, and we can't force them to switch to IE7 or Firefox.

May be using adaptive rendring this can be solved? Thank you for answers.

Using an IFRAME introduces a whole new set of problems and a lot of complexity. I don't know that this is addressed in Firefox or IE7.

Well, It's a shame such a great control won't have a normal behavious in IE 6 ( FireFox has no issues with <select>s, haven't tested it on IE 7 yet). I'm not sure about the complexity, since an iframe can be inserted into document tree as the div is inserted currently, and apply filter on it. That would work nicely for IE 6, when for FireFox just a regular div.

Anyway, my understanding is that it's not going to be implemented or fixed, and that's a shame.

Tthank you for information.