ThinkGeo.com    |     Documentation    |     Premium Support

How to hide a popup?

#1

is there a way to close or hide a popup?



My popup is always on the map.

#2

Hi guangming, 
  
 How you generate your popup? I think our popup will be closed if you click the close button on it. 
  
 Please paste some code shows how you build the popup. 
  
 Regards, 
  
 Don

#3

I added the close button but when I click it and it triggers another map click event. Then the popup shows again. 
  
 I need to programmatically hide the popup at least, or I have to destroy the popup.  
  
 Also, per openlayer docs, there are many types of popups, which type are you creating? 
  
 map.Popups.Add(new CloudPopup("Information") { AutoSize = true, IsVisible = false, HasCloseButton = true });

#4

Hi Guangming, 
  
 In MVC the cloud popup is using the FramedCloud from Openlayers. 
  
 It looks your close button catch click event but it keep bubble the event to map. 
  
 I found some topic discuss about this problem maybe helpful.  
  
 thinkgeo.com/forums/MapSuite/tabid/143/aft/11198/Default.aspx 
 thinkgeo.com/forums/MapSuite/tabid/143/aft/11419/Default.aspx 
 thinkgeo.com/forums/MapSuite/tabid/143/aft/11660/Default.aspx 
  
 I haven’t reproduce this in our HowDoISample, if you still have this issue please let us know. 
  
 Regards, 
  
 Don

#5

i tried the solutions from your links. It did not work. 
  
 Here is my code and the (2nd) close function never gets called. 
 The first one was called (OnMapCreated). 
  
         function OnMapCreated(map) { 
             myMap = map; 
             if (map.popups.length <= 0) return; 
  
             var i = 0; 
             for (i = 0; i < map.popups.length; i++) { 
                 OpenLayers.Event.stopObservingElement(map.popups.closeDiv, "click", 
                     OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups)); 
                 OpenLayers.Event.observe(map.popups.closeDiv, "click", 
                     OpenLayers.Function.bindAsEventListener(popupCloseCallBack, map.popups)); 
                 OpenLayers.Event.observe(map.popups.closeDiv, "touchend", 
                     OpenLayers.Function.bindAsEventListener(popupCloseCallBack, map.popups)); 
             } 
                  
         }; 
  
         function popupCloseCallBack() { 
             alert("popupCloseCallBack Created"); 
             var itemIndex; 
             for (itemIndex = 0; itemIndex < myMap.popups.length; itemIndex++) { 
                 if (myMap.popups[itemIndex].id === this.id) { 
                     myMap.popups[itemIndex].hide(); 
                 } 
             } 
  
             this.hide(); 
         };

#6

Hi Guangming, 
  
 I debug your code, your problem is use map.popups.closeDiv, you should want to use map.popups.closeDiv here. 
  
 for (i = 0; i < map.popups.length; i++) { 
                 OpenLayers.Event.stopObservingElement(map.popups.closeDiv, “click”, 
 OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups)); 
                 OpenLayers.Event.observe(map.popups.closeDiv, “click”, 
 OpenLayers.Function.bindAsEventListener(popupCloseCallBack, map.popups)); 
                 OpenLayers.Event.observe(map.popups.closeDiv, “touchend”, 
 OpenLayers.Function.bindAsEventListener(popupCloseCallBack, map.popups)); 
                 alert(“Event handler”); 
             } 
  
 This will works. 
  
 BTW, please don’t forget assign value to itemIndex. 
  
 Regards, 
  
 Don

#7

I did not see the difference. Here is my code again: 
 basically, I loop all the popups and set the event for its closeDiv (the close button). 
  
 var i = 0; 
             for (i = 0; i < map.popups.length; i++) { 
                 //alert(map.popups.closeDiv); 
                 OpenLayers.Event.stopObservingElement(map.popups.closeDiv, "click", 
                     OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups)); 
                 OpenLayers.Event.observe(map.popups.closeDiv, "click", 
                     OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups)); 
                 OpenLayers.Event.observe(map.popups.closeDiv, "touchend", 
                     OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups)); 
             }

#8


 var i = 0;
            for (i = 0; i < map.popups.length; i++) {
                //alert(map.popups[i].closeDiv);
                OpenLayers.Event.stopObservingElement(map.popups[i].closeDiv, "click",
                    OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups[i]));
                OpenLayers.Event.observe(map.popups[i].closeDiv, "click",
                    OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups[i]));
                OpenLayers.Event.observe(map.popups[i].closeDiv, "touchend",
                    OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups[i]));
            } 

#9

Hi guangming, 
  
 It looks the system met problem in previous post. 
  
 My modify is map.popups.closeDiv but it shows map.popups.closeDiv. 
  
 Sorry I haven’t double check the reply. 
  
 Regards, 
  
 Don

#10

Hi, 
  
 You’re right, if you don’t use code mode, the [ i ] won’t shows. 
  
 So I think you should solved this problem. 
  
 Regards, 
  
 Don

#11

no, it did not. the call back function never gets called.

#12

Hi guangming,



Attached is my test code, you can use it replace your DisplayASimpleMap files in HowDoISamples.



Regards,



Don

TheTestPackage.zip (1.4 KB)

#13

could not download your code. the link is empty. 
  
 Could you upload it again? 
  
 Thanks,

#14

Hi Guangming, 
  
 I have rename the zip file name and update the link. 
  
 Please download it again. 
  
 Regards, 
  
 Don