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

ModalDialog inside updatepanel

I've got a button that shows a modal dialog box. The idea is to add an object to a database, then refresh a listbox on the main page. The dialog works correctly, except with click cmdOk, the server side function is never called. I suspect it's because there's no longer an event handler registered by JS that calls the script to do the postback. I probably need to create a client side script using OnOkScript="onOK()", but I have no idea how to make the page postback to call cmdNewObject_Click without a full postback. Any ideas?

Thanks,

Rick

<asp:LinkButtonID="cmdAddObject"runat="server"Text="Add Object"></asp:LinkButton>

<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server">

<cc1:ModalPopupPropertiesBackgroundCssClass="modalBackground"OkControlID="cmdOk"CancelControlID="cmdCancel"DropShadow="true"PopupControlID="pnlAddObject"TargetControlID="cmdAddObject"></cc1:ModalPopupProperties>

</cc1:ModalPopupExtender>

<atlas:UpdatePanelID="pnlPopup"runat="server"Mode="conditional">

<Triggers>

<atlas:ControlEventTriggerControlID="cmdOk"EventName="Click"/>

</Triggers>

<ContentTemplate>

<asp:PanelID="pnlAddObject"runat="server"CssClass="modalPopup"Style="display: none">

<div>

<divid="ObjectName">

<asp:TextBoxID="txtObjectName"runat="server"></asp:TextBox></div>

<div>

<divid="OkButton">

<asp:ButtonID="cmdOk"runat="server"OnClick="cmdNewObject_Click"Text="New Object"/></div>

<divid="CancelButton">

<asp:ButtonID="cmdCancel"runat="server"Text="Cancel"/></div>

</div>

</div>

</asp:Panel>

</ContentTemplate>

</atlas:UpdatePanel>

Seethis post and maybe consider removing the OkControlID property so the Ok button can postback normally (thereby dismissing the ModalPopup). I'm thinking you may also want to get rid of the UpdatePanel here as I'm not sure it'll ultimately be necessary.

ModalPopup + Postback

Hi,

I've utilized the modalPopup control - and it works well - apart from the fact I can't figure out a way for it to postback?!

Any ideas?

Thank you.

anyone?

http://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx

is it the one that you're looking for?

that's populating it based on a webservice.

i want server side actions to be performed once a user clicks a button in the modal box.

anyone else? this is quite urgent :(

what do you mean by performing server-side actions? why don't you call it through web service then?

i just didnt want to have to build a webservice - just in order to append some data to a database, which i wanted to handle through what seemed like a simple postback :(

Here is what i have so far.

A page with a modal extender.

If i link OkControlID to the button I want to perform any action - then it doesn't postback, and hence nothing happens.

If i don't link it using the above - then the action executes - BUT - modal extender continues to sit there, not closing.

So perhaps what I am after now is a way to close it? or link my button to postback, AND to close the modal popup.

any ideas?

thank you.

Hi RomanT,

Sounds like you should not use OkControlID, and then include MyModalExtender.Hide() at the end of your server side event handler.

Thanks,
Ted