We experienced the same problem using the ModalPopup control in SharePoint 2007. Adding the doctype definition to the masterpage solved the problem. However, some default SharePoint parts are no longer being displayed correctly. Trying to find a fix for
that now. Tested the ModalPopup with this docdef adjustment so far on IE 7, IE 6, Opera 9.25, FireFox 2 and FireFox 1.5 so far and all seem to handle it fine.
Koen Zomers
Microsoft .NET Technology Specialist
The Netherlands, Europe
In order to get a correct display of our general web layout, I was obliged to comment the <DOCTYPE....> but in this way I get the same error in the position of the modal popup.
On the other hand, if I uncomment che doctype, the modal popup is shown correctly but the web pages are not shown correctly...
Perhaps this can be a little more elegant, but you get the idea. A little JS thrown in the client side onclick handler calculates the browser window's size, sets the modal div to correct size, and displays it. Since all of my images are the same size and
follow a naming convention, I was able to cheat a little. This example only works in IE, but since it is SP that is cool. Because the IE opacity property is inherited by child elements, the modal background div cannot contain the target div (or else opacity
will affect the target too), and should be empty. It has a z-index which is higher than all of the page's elements except the target div, which is topmost.
mrkoen
Member
6 Points
4 Posts
Re: Help: Modal Popup positioning with IE7
Jan 09, 2008 02:00 PM|LINK
We experienced the same problem using the ModalPopup control in SharePoint 2007. Adding the doctype definition to the masterpage solved the problem. However, some default SharePoint parts are no longer being displayed correctly. Trying to find a fix for that now. Tested the ModalPopup with this docdef adjustment so far on IE 7, IE 6, Opera 9.25, FireFox 2 and FireFox 1.5 so far and all seem to handle it fine.
Microsoft .NET Technology Specialist
The Netherlands, Europe
korzaun
Member
7 Points
7 Posts
Re: Help: Modal Popup positioning with IE7
Feb 03, 2008 10:16 PM|LINK
Hello, anybody solved in other way the problem?
In order to get a correct display of our general web layout, I was obliged to comment the <DOCTYPE....> but in this way I get the same error in the position of the modal popup.
On the other hand, if I uncomment che doctype, the modal popup is shown correctly but the web pages are not shown correctly...
Any help is welcome.
Thanks,
Davide
scyldar
Member
2 Points
1 Post
Re: Help: Modal Popup positioning with IE7
Jan 26, 2009 10:35 PM|LINK
You can easily reproduce a modal mopup with just a little CSS and JS....
I have a little web part which displays a single image (from a Picture Library) in a modal pop-up, triggered by clicking a tumbnail:
protected override void CreateChildControls()
{
base.CreateChildControls();
this.controls.add(new LiteralControl("<a href='#' onclick=\"javascript:document.getElementById('modal').style.width = document.body.clientWidth + 'px';document.getElementById('modal').style.height = document.body.clientHeight + 'px';document.getElementById('modal').style.display='block';document.getElementById('chart').style.display='block';\"><img src='YourUrlHere/Project%20Charts/_t/" + project + "_jpg.jpg' alt='Project Chart' /></a>"));
this.Controls.Add(new LiteralControl("<div ID='modal' style='position:absolute;top:0px;left:0px;display:none;z-index:9;background-color:#383838;filter:alpha(opacity=60);'></div><div ID='chart' style='position:absolute;top:100px;left:180px;display:none;z-index:10;'><button onclick=\"javascript:document.getElementById('modal').style.display='none';document.getElementById('chart').style.display='none';\">CANCEL</button><br /><br /><img src='http://YourUrlHere/Project%20Charts/_w/" + project + "_jpg.jpg' alt='Project Chart' /></div>"));
}
Perhaps this can be a little more elegant, but you get the idea. A little JS thrown in the client side onclick handler calculates the browser window's size, sets the modal div to correct size, and displays it. Since all of my images are the same size and follow a naming convention, I was able to cheat a little. This example only works in IE, but since it is SP that is cool. Because the IE opacity property is inherited by child elements, the modal background div cannot contain the target div (or else opacity will affect the target too), and should be empty. It has a z-index which is higher than all of the page's elements except the target div, which is topmost.
modal load problem sharePoint webpart SharePoint image thumnail css modal popup