Mon, 2014-03-10 11:27
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!
Mon, 2014-03-10 18:25
#1
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.
Mon, 2014-03-10 18:36
#2
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)
Mon, 2014-03-10 21:23
#3
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.
Mon, 2014-03-10 21:29
#4
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;" >
Mon, 2014-03-10 21:32
#5
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 }
Mon, 2014-03-10 21:34
#6
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">
Tue, 2014-03-11 12:11
#7
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.
Tue, 2014-03-11 12:50
#8
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
Tue, 2014-03-11 15:47
#9
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.
Tue, 2014-03-11 17:33
#10
Great I am happy it is solved
Great I am happy it is solved 