Popup replacement

From MapbenderWiki

Jump to: navigation, search

Today nearly everyone has got a Popupblocker, so there is the idea of replacing the Mapbender Popups with javascript generated layer windows. The easyest way to implement this would be to do this with a library. We already integrated jQuery so it would be better to take a jQuery plugin to do it, because it would probably be smaller.

Contents

Obstacles

The problem is that jQuery actually runs in its own iframe and so modifing the DOM of parent window is a little tricky and with plugins often not possible without changing the code. I tried it with jqModal, I succeeded in geting it work with firefox, but ie wouldn't work. So I would propose to include jQuery in the main frame. To do this we need to do some changes to json.js because these two libraries don't like each other (to be precise json puts prototype functions to objects of jquery and comes into something tike an infinite loop). So my idea is not to put prototype functions to each object but write a global function called toJSONString(obj) which takes the object to transfom as parameter. With this change both libraries can work together, we only need to transform each obj.toJSONString() to toJSONString(obj), which is by the way one character shorter ;-).

I found two jQuery plugins that could do what we need:

jqModal

Demo:[1]

Pro:

  • active developement
  • quite stable
  • very small (with drag and resize 4.5kb)

Drawbacks:

  • no minimize
  • frame elements (title, closebox, resizer) have to be defined manually

jBox

Demo:[2]

Pro:

  • minimize
  • handeling as simple as a popup window(no frame elements, can load iframe as content with url)

Drawbacks:

  • very new
  • demo seems to be a little buggy

jQuery UI

Demo:[3]

Pro:

  • active developement
  • stable
  • frame-element handlet by the plugin

Drawbacks:

  • no minimize
  • bigger as jqModal (with drag and resize 21.3kb)


From my point of view jqModal is the better choice because jBox looks buggy. The frame elements could be added by a wrapper function.

Demo

Image:Bildschirmfoto.png

Personal tools