Problem mit Javascript - modal popup in jvectormap

[Afrob]

Hallo Leute,

ich hab ein Problem und hoffe, dass Ihr mir hier weiterhelfen könnt.
Ich benutze jvectormap und bisher lief alles einwandfrei. Bis jetzt hat sich beim Klick auf ein bestimmtes Gebiet ein Link in einem neuen Fenster geöffnet und zwar über folgenden Befehl:

onRegionClick: function(event, url) {
            if (url == "DE-SA") {
                window.location = '/urlXYZ'
            }

Nun möchte ich, dass beim Klick kein externer Link geöffnet wird, sondern per jquery ein Dialog/Popup. Wie löse ich das? Bekomme es nicht gebacken... :-(

onRegionClick: function(event, url) {
            if (url == "DE-SA") {
                window.location = '[open dialog/div XYZ]'
            }

Hier mein kompletter Code: http://jsfiddle.net/xBgRQ/2/
Hier das einfache Popup: https://jqueryui.com/dialog/

mfg Afrob

 

[Paspirgilis]

onRegionClick: function(event, url) {
            if (url == "DE-SA") {
                window.location = '[open dialog/div XYZ]'
            }

Naja , mit

window.location = 'URL';

Änderst du die URL wo man sich gerade befindet, und sofern du nicht nur den Anker (das zeug hinter dem "#"-Symbol) änderst, redirektest du die Seite..

Wenn du nun einfach window.open('URL', '_BLANK') machen würdest, würdest du ein "popup" also ein neues Fenster öffnen.
Wenn du nun dein Div einblenden möchtest, dann document.getElementById('mein-element').style.display = 'block';

Vielelicht solltest du dir mal die Dialog() Funktion von jQuery-UI angucken:
https://jqueryui.com/dialog/


Damit müsstest du dann nur ein DIV mit Inhalt befüllen dun am anfang auf display:none setzen. Dann z.B. so einen code:

onRegionClick: function(event, url) {
            if (url == "DE-SA") {
                $('#mein-element').dialog();
            }

Über eine positive Bewertung würde ich mich freuen,

MfG
Mark Paspirgilis

 

[Afrob]

Vielen Dank für deine Hilfe, jedoch komme ich damit leider nicht weiter!

Ich bin nun schon ein ganzes Stück weiter gekommen, d.h. ich kann die Boxen per "normalen" Link problemlos aufrufen:

http://jsfiddle.net/bQ78b/119/

Nur in der Karte selber, wenn ich auf eine Region klicke, da bekomme ich es nicht hin!
Vielleicht kannst du im Fiddle den Code für rot oder grün eintragen, dass eine der beiden Boxen aufgeht, wenn ich auf eine Region klicke!?

window.location = 'http://www.google.de'

Das muss doch einfach durch einen Prozeduraufruf ersetzt werden...aber wie?

mfg Axel

 

[Paspirgilis]

Das hattest du doch schon ganz gut hinbekommen.
Nur eine kleinigkeit fehlte Habe es dir im jsfiddlecode eingebaut, hoffe ich habe alles richtig gemacht, habe noch nie mit jsfiddle gearbeitet.
http://jsfiddle.net/bQ78b/125/

 

[Afrob]

Manchmal sieht man den Wald vor lauter Bäumen nicht ;-)
Danke!