10 replies [Last post]
NumbLock27
NumbLock27's picture
Offline
newbie
Last seen: 6 years 12 weeks ago
Timezone: GMT-5
Joined: 2014-03-10
Posts: 5
Points: 8

Hello all. I am trying to do something in pure CSS that I always used a ModalPopupExtender from the Ajax Control Toolkit. I have the popup opening correctly and I set the opacity in the outer div and set the z-index but it always dims the whole screen including the popup. My CSS is below. What am I missing?

.modalBackground
{
    background-color: #C0C0C0;
    opacity:0.4;
    filter:alpha(opacity=40);
    z-index:1000;
}
 
.modalPopup
{
    background: #4b6c9e;
    border: 2px solid black;
    border-radius: 5px;
   position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 125px;
    margin: auto;
    position:absolute;
    z-index:10027;
}

Any help appreciated!

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Can you show us your HTML

Can you show us your HTML code as well?
Or could you send us a link to where you have this command installed?

Also I am used to keep Z-indexes low like 10 and 20 instead of 1000 and 10027.

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

This is what I found on the

This is what I found on the AJAX Control Toolkit's very own website:

"The opacity filter stops working when a page is very large, but only on IE8. Firefox works fine. The fix is to change line 647
this._backgroundElement.style.height = Math.max(Math.max(document.documentElement.scrollHeight, document.body.scrollHeight), clientHeight) + 'px';
to
this._backgroundElement.style.height = clientHeight + "px";"

You can find this on the ModalPopupBehavior.js file (if I am not mistaken)

Check Maximum Webdesign for your online solutions

NumbLock27
NumbLock27's picture
Offline
newbie
Last seen: 6 years 12 weeks ago
Timezone: GMT-5
Joined: 2014-03-10
Posts: 5
Points: 8

Thanks for your reply

Hi. Thanks for your reply. I am not using the toolkit. I wanted to do this in raw CSS. I am seeing this behavior on all browsers.

NumbLock27
NumbLock27's picture
Offline
newbie
Last seen: 6 years 12 weeks ago
Timezone: GMT-5
Joined: 2014-03-10
Posts: 5
Points: 8

Code

Hi. Thanks for the reply. The code is pretty simple. There is an outer div and an inner div. The outer div is in the master page.

outer div:

 <div runat="server" style="height: 100%; width: 100%" id="BodyDiv">

The inner div is in the content page (nested within BodyDiv):

     <div class="modalPopup" runat="server" id="PopUp" style="width: 850px; height: 278px; left: 170px; display: none;" >

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Is there a way you can show

Cause I think your "modalBackground" and "modalPopup" are in the same div.
Maybe place both of them in different div's and change your css to:

div.modalBackground { 
Your code
}

and

div.modalPopup {
Your code
}

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Maybe change your HTML

Maybe change your HTML command:
<div runat="server" style="height: 100%; width: 100%" id="BodyDiv">

to

<div class="modalBackground" runat="server" style="height: 100%; width: 100%" id="BodyDiv">

Check Maximum Webdesign for your online solutions

NumbLock27
NumbLock27's picture
Offline
newbie
Last seen: 6 years 12 weeks ago
Timezone: GMT-5
Joined: 2014-03-10
Posts: 5
Points: 8

Thanks for your reply

Hi. I do not apply modalbackground to BodyDiv because if I did the screen would always be dim. I apply the class dynamically when the user clicks a button.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Is the website live, if so,

Is the website live, if so, can we check the website so we can debug the website ourselves and see the whole css and HTML code.

Thanks

Check Maximum Webdesign for your online solutions

NumbLock27
NumbLock27's picture
Offline
newbie
Last seen: 6 years 12 weeks ago
Timezone: GMT-5
Joined: 2014-03-10
Posts: 5
Points: 8

Solved

Thanks again everyone for your replies. Helldog was right. The ModalPopup was in the BodyDiv. I moved it and used some JQuery to size it to the full screen height and width.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Great I am happy it is solved

Great I am happy it is solved Wink

Check Maximum Webdesign for your online solutions