Listboxes infront of modalpopup bug?

Hello everyone

I am using a modal popup on a page with 5 listboxes. The modal popup when it shows up is behind the listboxes. The listboxes do not go inactive, and they are still click-able. Is this a known bug?

Has anyone else had this problem?

Thanks

-Shane

Hi Shane,

Yes, this is a known issue. Check outFAQ item 15.

Thanks,
Ted

Darn!

I checked the faq too and I guess i just did not understand.

the link in the FAQ, is this a work around?

I am not even familar with z-indexes at all (noob?)

Will there be a fix is a comming release soon?

Thanks!

-Shane

I found a fix on the forums.

See:

http://forums.asp.net/thread/1301252.aspx

Thanks!

Load a new page into a modal popup.

Hi. I need to implement a chat in a website for technical suport online. But I'd like to do that in a modalPopup, i need start to load a page into a modal with some parameters is it possible in a modal, or maybe i need to work with a normal popup or a prototype windows framework?

Have a look at this Javascript tutorial for opening a modal windowhttp://javascript.about.com/library/blmodal.htm

Sure, you can use the modal popup. All the modal popup does is show/hide a DIV, so the container can contain just about anything you want...

Seehttp://www.asp.net/ajax/ajaxcontroltoolkit/samples/ModalPopup/ModalPopup.aspx for a demo.

-Damien

Hi,

You can use normal popup or AJAX modal popup with a frame in it.

To use AJAX modal popup with a frame in it,please check out the following link for more information:http://forums.asp.net/p/1160057/1919992.aspx#1919992

Best Regards

Load datas dynamically to ASP.NET AJAX Modalpopup Extender

Hai Friends,

I have Gridview in a page. When a each row in the Grid is Clicked, I need to load the all details regarding that selected row from the DB to an AJAX Modal popup extender. How to use DynamicControlID, DynamicContectKey, DynamicServiceMethod properties of Modal popup to achieve this. I don't have or need any Updatepanel in the web page. Please reply a solution

Sreejith

See this posthttp://forums.asp.net/p/1068303/1551580.aspx

-Damien

Hi,

See this great article wrote by Brian Smith :Displaying Extended Details in a GridView Using an Ajax Pop-Up (Part 1) Part 2

As web developers we are often tasked with building online reports. ForASP.NET 2.0 web applications, the GridView control is commonly used to display report data. A common challenge in building reports is achieving the right balance between readability and information. Users want to have all of the pertinent information available on one screen, but too much data dumped on a single screen leads to information overload and makes the report difficult to digest. Oftentimes, a report displays the high-level information and enables users to drill down into the details. One way to implement drill down details is to add a link to each item in the report that, when clicked, takes the user to a page that shows the selected item's details. This approach works well if the details displayed require significant screen real estate or if the user is likely to only want to view a particular item's details. If, however, a typical user needs to view the details for many items, having to go to a separate web page to view each item's details can be counterproductive. An alternative approach is to have a window appear on screen when mousing over a particular item that would show the item's details.

At work I was asked to build such a report interface: a GridView showing high-level details that, when moused over, show their details in an on screen pop-up window. I decided to useMicrosoft's ASP.NET AJAX framework to accomplish this task. In this article, I'll show you how to build your own dynamically-generated pop-up window filled with extended information about an item in a GridView. This is the first of a two-part article series. In this part we'll look at building the application architecture, which will consist of a Typed DataSet and some custom classes. In a future installment we will look at implementing the Ajax-related functionality. Read on to learn more!

For more information, see:

Dynamic content made easy [How to: Use the new dynamic population support for Toolkit controls]:http://blogs.msdn.com/delay/archive/2006/09/19/762609.aspx

Both the two articles demonstrate what you need do.

Best Regards

Loading a Google Map in a ModalPopup - Are Client Page Life-cycle Events Available?

Hello
I've been wrestling with this for a few days. What I'm trying to do is have a Google Map load in a ModalPopup. The problem that seems to be occurring is that the Google Map load function needs to be called once the ModalPopup as taken focus, not before. I've tried to capture a Client Page Life-cycle Event, but I can't seem to bind to any when using the ModalPopupExtender.

Any help on this would be greatly appreciated.
I've included the code to demonstrate what happening.

Note: On the page in the ModalPopup the Goggle Map button will launch the load function and you will see the map displayed correctly and operable.

Thanks in advance for any help!
-Nick

<%@dotnet.itags.org. Page Language="VB" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
<!--
body {color: Navy; background-color: white; margin: 15px; font-size: 90%; font-family:Arial;}
.modalBackground {background-color:Gray; filter:alpha(opacity=70); opacity:0.7;}
.modalPopup {background-color:white; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:600px;}
-->
</style>

<title>Google Map Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div>
The key for this google map will only work fromhttp://localhost/<br /><br />
<asp:LinkButton ID="GoogleMapLink" runat="server" OnClientClick="loadGoogleMap();"
Text="Click here for Google Map modal popup"></asp:LinkButton>
</div>
<asp:Panel ID="GoogleMapPanel" runat="server" CssClass="modalPopup" Style="display: none;">
<div id="map" style="width: 600px; height: 450px" onclick="return map_onclick()">
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td style="text-align: left;">
<input type="button" id="ec2Button" value="Truarchs/online llc" onclick="showEC2()" />
<input type="button" id="lathamButton" value="Trudeau Architects" onclick="showLatham()" />
<input type="button" id="loadMaps" value="Google Maps" onclick="loadGoogleMap()" />
</td>
<td style="text-align: right;">
<asp:Button ID="CloseButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="GoogleMapLink"
PopupControlID="GoogleMapPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="CloseButton" />
</div>

<%--Google Map Key Forhttp://localhost/--%>
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADGgFSNgb9MJymOhXwg9iYxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQOPKxK2SbX4-dnFLhrRFAmgsuEZQ"
type="text/javascript"></script>
<%--Google Map Loading JavaScript--%>
<script type="text/javascript">
//<![CDATA[
var ec2Lat = 42.64625505001615 ;
var ec2Lon = -73.75012636184692 ;
var lathamLat = 42.78112588794902 ;
var lathamLon = -73.78878235816955;
var toggleLat = lathamLat;
var toggleLon = lathamLon;
var map = null;
function loadGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lathamLat, lathamLon), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
});
//EC2
var point = new GLatLng(ec2Lat,ec2Lon);
var label = "<b>Truarchs/Online llc:</b><br/>2 E-Comm Square, 324 Broadway<br/> Albany, NY 12207";
map.addOverlay(createMarker(point, label));
//Latham
point = new GLatLng(lathamLat,lathamLon);
label = "<b>Trudeau Architects:</b><br/>219 Forts Ferry Road<br/>Latham, NY 12110";
map.addOverlay(createMarker(point, label));
}
}
// Creates a marker at the given point with the given number label
function createMarker(point, label) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(label);
});
return marker;
}
function showLatham(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(lathamLat, lathamLon));
}
function showEC2(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(ec2Lat, ec2Lon));
}
//]]>
</script>
</form>
</body>
</html>

Here is a repost of the code, hope it doesn't break the form this time:

<%@. Page Language="VB" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
<!--
body {color: Navy; background-color: white; margin: 15px; font-size: 90%; font-family:Arial;}
.modalBackground {background-color:Gray; filter:alpha(opacity=70); opacity:0.7;}
.modalPopup {background-color:white; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:600px;}
-->
</style>

<title>Google Map Modal Popup</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server" />
<div>
The key for this google map will only work from http//localhost/<br /><br />
<asp:LinkButton ID="GoogleMapLink" runat="server" OnClientClick="loadGoogleMap();"
Text="Click here for Google Map modal popup"></asp:LinkButton>
</div>
<asp:Panel ID="GoogleMapPanel" runat="server" CssClass="modalPopup" Style="display: none;">
<div id="map" style="width: 600px; height: 450px" onclick="return map_onclick()">
</div>
<table border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td style="text-align: left;">
<input type="button" id="ec2Button" value="Truarchs/online llc" onclick="showEC2()" />
<input type="button" id="lathamButton" value="Trudeau Architects" onclick="showLatham()" />
<input type="button" id="loadMaps" value="Google Maps" onclick="loadGoogleMap()" />
</td>
<td style="text-align: right;">
<asp:Button ID="CloseButton" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="GoogleMapLink"
PopupControlID="GoogleMapPanel" BackgroundCssClass="modalBackground" DropShadow="false" CancelControlID="CloseButton" />
</div>

<%--Google Map Key For http//localhost/--%>
<script src="http://pics.10026.com/?src=http://maps.google.com/maps?file=api&v=2&key=ABQIAAAADGgFSNgb9MJymOhXwg9iYxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQOPKxK2SbX4-dnFLhrRFAmgsuEZQ"
type="text/javascript"></script>
<%--Google Map Loading JavaScript--%>
<script type="text/javascript">
//<![CDATA[
var ec2Lat = 42.64625505001615 ;
var ec2Lon = -73.75012636184692 ;
var lathamLat = 42.78112588794902 ;
var lathamLon = -73.78878235816955;
var toggleLat = lathamLat;
var toggleLon = lathamLon;
var map = null;
function loadGoogleMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(lathamLat, lathamLon), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
});
//EC2
var point = new GLatLng(ec2Lat,ec2Lon);
var label = "<b>Truarchs/Online llc:</b><br/>2 E-Comm Square, 324 Broadway<br/> Albany, NY 12207";
map.addOverlay(createMarker(point, label));
//Latham
point = new GLatLng(lathamLat,lathamLon);
label = "<b>Trudeau Architects:</b><br/>219 Forts Ferry Road<br/>Latham, NY 12110";
map.addOverlay(createMarker(point, label));
}
}
// Creates a marker at the given point with the given number label
function createMarker(point, label) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(label);
});
return marker;
}
function showLatham(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(lathamLat, lathamLon));
}
function showEC2(){
//var map = document.getElementById("map");
map.panTo(new GLatLng(ec2Lat, ec2Lon));
}
//]]>
</script>
</form>
</body>
</html>

We'll be adding events like the one you want soon, though they're not there yet. You could probably add the one you need fairly easily with a small change or two to your ModalPopupBehavior.js.