How to set opacity in Modal Pop?

Question

0.00/5 (No votes)

See more:

my ModalPopUp code is

XML

<ajaxToolkit:ModalPopupExtender ID="ModalPopUp" runat="server" BackgroundCssClass="modalBackground"
                    CancelControlID="CancelButton" DropShadow="true" Enabled="true" PopupControlID="Panel1"
                    TargetControlID="btn">
                </ajaxToolkit:ModalPopupExtender>

& In Panel One Text Box with 2 Buttons & i called this in Page load event.

my css file is:

CSS

.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;
}

But while triggering ModalPopUp, opacity and bgcolor is not working(modalBackground:css class file is not triggering)

Help me to solve.

I was trying to view this in Chrome and Firefox. it is not working.

Posted 20-Jun-13 2:37am

KuttiSankar

Updated 20-Jun-13 2:53am

Karthik Harve

v4

Add a Solution

Comments

Karthik Harve 20-Jun-13 9:05am

where you are applying css class "modalPopup" ?

KuttiSankar 20-Jun-13 9:07am

in Panel
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup">

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

*Karthik Harve* · Answer 1 · 2013-06-20T03:13:00

Solution 1

Hi,

try by rewriting the css class as below and check whether the style is applying or not.

CSS

.modalBackground
{
    background-color: Gray;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

because, property opacity will not recognize in Mozilla, so you have to write as -moz-opacity.

hope it works.

Posted 20-Jun-13 3:13am

Karthik Harve

Comments

KuttiSankar 20-Jun-13 9:28am

No dude it is not working...

Karthik Harve 20-Jun-13 9:36am

which browser are you using ? which CSS version ?

Kalpesh Kumar Joshi · Answer 2 · 2013-06-20T04:10:00

Solution 2

Hi I have check your code in my test page solution and its work fine. May be check if your css file is properly attached with page(or u can check in firebug or developer console that css is attached loaded or not).

Posted 20-Jun-13 4:10am

Kalpesh Kumar Joshi

Updated 20-Jun-13 4:13am

v2

Comments

KuttiSankar 21-Jun-13 5:27am

I hope Css is not loading and don't know how to fix this. still i'm trying

Kalpesh Kumar Joshi 21-Jun-13 8:43am

Did you add <link></link> tag in your page to load CSS file?, and also check href path of link tag is proper or not.
some time adding "../" to href path can load the stylesheet.
Also you can check it by clicking on stylsheet link in developer console in browser.