Resizable Modal Popups?

I'm trying to make a modal popup be resizable. I've tried to combine the ModalPopupExtender with the ResizableControlExtender. Both are associated with the same panel.

It kinda works, but not correctly. When the popup appears, the resize graphic shows up on the left hand corner of the panel. After I click on the resize graphic it then will expand to the size of the modal window. In addition if the contents of the panel have to scroll (as a result of the resizing) the scrollbars mess up the positioning of the resize graphic.

I also had to turn off the drop shadow since it was not resizing with the panel.

Gerry

I think this is a definite nice to have especially if the popup is has a lot of form controls and you would like people to resize and/or have scrolling turned on. Please open awork item for this and we look into fixing this. The solution may not be very straightforward given that you want it to have the dropshadow and the drag in addition to the resize so the modalpopup code itself may need to change. Thanks!

It should work just fine Without the drop shadow. You can hook up the resizable extender to the modal panel and get things working for you.

The drop-shadow is not important to me. I will go ahead and enter the item.

Thanks,
Gerry

I haven't used the modal popup yet but I suspect that it is much like the popup extender. To get the shadow to stick with the control I had to add another panel that contained the popup container panel. I then hooked the resizable extender to that outer panel.

Again I haven't attempted it yet with modal. Here is a link to the code in the forum where I posted my solution.

http://forums.asp.net/t/1082450.aspx

Larry Aultman

I was not able to make the resizable extender work with the ModalPopup extender. I am sure that the source code could be modified to make it work however there is another solution that works very well and yields the same results: a drag-able, resizable, popup modal dialog. I am providing all the code below. You will need an "overlay" image that will provide the user screen "gray-out" effect. You also need very specific CSS styles and then you need the aspx and codebehind. I have included all source necessary, except the overlay.png file.

In my experience, most of the time that I would need a modal popup I need to get something that is bound for the server. Rarely do I need a popup that collects information when it isn't sent back. So this version's purpose is to collect data in a modal popup and send it all back to the server where the magic is done. Rather than use complex javascript to raise events back to the server I chose to use the extenders to handle the display and use AJAX update panels to handle the server. It all works very smoothly. I get the slick action of the client side and the AJAX posting.

Larry Aultman

I created my overlay.png file using Microsoft Expression. Very easy, make a new document with a size of say 32x32 pixels. Use the rectangle tool and draw a box removing the border and filling it with a soft color. I used a color that works well with my website. In the properties window set the Opacity to 50 (which is 50% transparent). Then export the image in PNG format. Drop this into your project folder. In the style sheet you will see my reference to the "overlay.png". NOTE: paths to files are relative to the style sheet's location NOT to the root of the site. I suggest that you put your style sheet in the root until you get everything working. Then you can move things around.

Next create a new aspx page with a codebehind page defined. Add a link in the "head" section to your style sheet something like:

<linkhref="pageStyles.css"rel="stylesheet"type="text/css"/>

Next place the following code in between the div tags in the new page.

<asp:scriptmanagerID="scriptmanager1"EnablePartialRendering="true"runat="server"></asp:scriptmanager>
<asp:UpdatePanelid="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:ButtonID="btnShowDialog"runat="server"Text="Show Modal Popup"onclick="btnShowDialog_Click"/><br/>
<asp:LabelID="lbLoginMsg"runat="server"Text="User Not logged In"></asp:Label>
<divid="popupContainer1"class="popupContainer">
<asp:Panelid="popupPanel1"runat="server"Visible="false"CssClass="overlay">
<asp:Panelid="dragControl1"runat="server"CssClass="dragControl">
<asp:Panelid="popupClientArea1"runat="server"CssClass="popupClientArea">
<asp:Panelid="dragPanel1"runat="server"CssClass="dragMePanel">
<divid="dragMe1"class="dragMe"> Login </div>
</asp:Panel>
<asp:Panelid="popupContent1"runat="server"CssClass="popupContent">
<divid="popupBuffer1"class="popupBuffer">
User Name:<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br/>
Password :<asp:TextBoxID="TextBox2"runat="server"></asp:TextBox><br/><br/>
<center>
<asp:ButtonID="btnLogin"runat="server"Text="Login"onclick="btnLogin_Click"/>
<asp:ButtonID="btnCancel"runat="server"Text="Cancel"onclick="btnCancel_Click"/>
</center>
</div>
</asp:Panel>
</asp:Panel>
</asp:Panel>
</asp:Panel>
<cc1:DragPanelExtenderid="DragPanelExtender1"runat="server"DragHandleID="dragPanel1"TargetControlID="dragControl1">
</cc1:DragPanelExtender>
<cc1:DropShadowExtenderid="DropShadowExtender1"runat="server"TargetControlID="popupClientArea1"Opacity="1"TrackPosition="True">
</cc1:DropShadowExtender>
<cc1:ResizableControlExtenderid="ResizableControlExtender1"runat="server"HandleCssClass="handleResizer"HandleOffsetX="2"HandleOffsetY="2"MinimumHeight="200"MinimumWidth="100"ResizableCssClass="resizingImage"TargetControlID="popupClientArea1">
</cc1:ResizableControlExtender>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Now you need the codebehind:

protectedvoid Page_Load(object sender,EventArgs e)
{
this.ResizableControlExtender1.MinimumHeight = 200;//set inital size of the popup
this.ResizableControlExtender1.MinimumWidth = 300;//set inital size of the popup
}

protectedvoid btnShowDialog_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User Not Logged In";
if (popupPanel1.Visible ==false)
popupPanel1.Visible =true;
}

protectedvoid btnCancel_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User Canceled Login";
popupPanel1.Visible =false;
}

protectedvoid btnLogin_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User: " + TextBox1.Text +" Password: " + TextBox2.Text;
popupPanel1.Visible =false;
}

Finally you need the CSS styles that make things happen.

/* Popup AJAX windows */

.popupControl

{

/*visibility:hidden;*/

}

.popupWin/* holds the entire popup window and its basic look.*/

{

background-color:Transparent;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

color:#838F86;

clear:both;

font-size:1em;

padding:10px;

height:50em;

width:50em;

min-width:20em;

min-height:20em;

}

.popupContainer/* holds the entire popup window and its basic look.*/

{

background-color:Transparent;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

color:#838F86;

clear:both;

float:left;

font-size:1em;

padding:10px;

height:50em;

width:50em;

min-width:20em;

min-height:20em;

}

.overlay

{

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;

text-align:center;

z-index:10;

background-image:url('images/overlay.png');/* relative to the style sheet file location */

background-repeat:repeat;

}

.dragControl

{

background-color:white;

z-index:100;

}

.popupClientArea/* provides the painting surface for the popup window */

{

background-color:#ffffff;

border:solid1px#445447;

overflow:hidden;

width:25em;

z-index:200;

}

.popupContent/* all content in the popup will be contained here */

{

background-color:Transparent;

overflow:auto;

text-align:left;

height:auto;

width:100%;

}

.popupBuffer/* this div provides a padding buffer from the edge so the content doesn't come flush with the edge */

{

padding:.3em;

}

.dragMePanel/* this provides the top edge that is the dragable area */

{

background-image:url('images/bg_nav.png');/* relative to the style sheet file location */

background-repeat:repeat-x;

cursor:move;

width:100%;

height:20px;

z-index:210;

}

.dragMe/* any text that might be shown in the drag area */

{

color:#ffffff;

text-align:center;

font-size:.8em;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

font-weight:normal;

}

.handleResizer

{

width:15px;

height:16px;

background-image:url('images/HandleHand.png');

overflow:hidden;

cursor:se-resize;

}

.resizingImage

{

border-style:solid;

border-width:2px;

border-color:#445447;

padding:0px;

}