Re: Enhancement Request - Background CSS of entire browser page - Modal Dialog

similar to the ModalPopup Ajax Toolkit tool, I'd like to be able to set the background of the entire page then the dialog is open, and go back to normal when it is not.   With the modalpopup, I can set the style I want to use for the background.  The backgroundcssclass property of the WebDialog appears to be for the actual dialog... which is not what I'm looking for.

 

Any suggestions?

Can you accomplish this by just manually setting the page background color when the dialog opens and closes?  You may have javascript events where you open or close your dialog, where you could set this.

document.bgColor='#0000FF'

regards,
Greg L

No, I can't accomplish it that way...  That works, but it's not the desired effect.

 I want to be able to use CSS so I can set opacity, etc.....

<aec4> wrote in message news:206309@10.0.1.98...

No, I can't accomplish it that way...  That works, but it's not the desired effect.

 I want to be able to use CSS so I can set opacity, etc.....

---

http://helpcentral.componentone.com/cs/forums/p/75654/206309.aspx#206309

I'm trying to accomplish the same thing and encountering the same problems.  You mention "Just set css properties in these events...".  Can you provide a specific example of how to accomplish this?  I'm working with ASP.NET and have defined a .css file with an entry:

.modalBackground {

filter:alpha(opacity=40);

opacity:0.4;

background-color:Gray;

}

This .css style is also used with other AJAX modal popup extenders in the site, so for consistency I'd like to use this .css setting to present a modal background when the C1WebDialog control is used rather than defining a new one.  Is there a way to do this?  If so, can you demonstrate how?

Use C1WebDialog's OnClientShown and OnClientHidden functions to set and clear that style. For example:

<c1d:C1WebDialog ID="C1WebDialog1" ... OnClientHidden="C1WebDialog1_OnClientHidden" OnClientShown="C1WebDialog1_OnClientShown">

1. function C1WebDialog1_OnClientShown(sender, e)
2. {
3. window.document.body.className = "modalBackground";
4. }
5. function C1WebDialog1_OnClientHidden(sender, e)
6. {
7. window.document.body.className = null;
8. }

hope that helps-

Greg

This works in IE, but in firefox the grey background color (the color that is normally applied to only the background to indicate that it is inactive) is applied to the component one dialog box too so that it appears inactive as well.  However, the component one dialog is still active (i.e. buttons on the dialog can be clicked) while the background elements are not active.  Any ideas on how to set it up so that it properly applies the background color in both IE and firefox?

Instead of setting the document body's CSS we can set this for the page element "C1WebDialog_modal" which gets created when opening a modal C1WebDialog with showModal().

Example from developers:

<style type="text/css">
   .modalBackground
   {
       filter:alpha(opacity=20);
       opacity:0.2;
       background-color:Red;
   }
</style>

<input type="button" onclick="$get('<%= C1WebDialog1.ClientID %>').control.showModal()" value="showModal" />

 

<c1d:C1WebDialog ID="C1WebDialog1" runat="server" ... ShowOnLoad="False" OnClientShown="C1WebDialog1_OnClientShown" ...>

 

  ...

 

<c1d:C1WebDialog>

 

Hope that helps!

Greg

 This fixes the problem of the C1Dialog being grey in Firefox, but it unfortunately introduces another problem.

To observe the problem, set up a page with a C1Dialog configured to open the modal background as described in Greg's post above, open the page in FireFox, and set the FireFox window to be not maximized in the screen.  In this state, show the C1WebDialog and observe that the C1WebDialog displays correctly with a proper modal background.  Next, close the C1Dialog control in the browser (screen now is fully non-modal), maximize the FireFox window, then click Show again and observe that the right and bottom portion of the screen are not the modal background color and are no longer modal (only the portion of the screen that was modal when first shown is modal now, the rest is neither colored nor modal, i.e.
any links now exposed due to the larger size of the browser can be clicked).

 It appears that the problem may be that the C1 javascript to support the C1WebDialog isn't configured to resize the C1WebDialog_ModalLayer page element to the full size of the browser every time the dialog control is opened.  Any ideas on how to fix this problem?