JavaScript – Zentriertes Popup

Bei einem Mausklick auf eine Region öffnet sich ein zentriertes Popup, mit einem Kreuz zum Schließen in der Ecke rechts oben. Es kann bei geöffnetem Popup direkt eine neue Region gewählt werden, ohne das Kreuz zum Schließen betätigen zu müssen. Das Popup wird dann automatisch aktualisiert.

[ERROR] Konfiguration nicht gefunden!!!

Javascript-Code kopieren/einfügen:

After_Load:

local_raphael.el.over = function(evt) {
            this.data("set").forEach(function(el) {
                if (el.type == "text") {
                    if (el.data("text")) {
                        el.stop().animate({
                            fill: el.data("text").hover
                        }, animTime);
                    }
                } else if (el.attr('fill') != 'none') {
                    if (el.data("colors")) {
                        el.stop().animate({
                            fill: el.data("colors").hoverfill,
                            stroke: el.data("colors").hoverstroke
                        }, animTime);
                    }
                }
            });
        };
local_raphael.el.out = function(evt) {
            this.data("set").forEach(function(el) {
                if (el.type == "text") {
                    if (el.data("text")) {
                        el.stop().animate({
                            fill: el.data("text").default
                        }, animTime);
                    }
                } else if (el.attr('fill') != 'none') {
                    if (el.data("colors")) {
                        el.stop().animate({
                            fill: el.data("colors").defaultfill,
                            stroke: el.data("colors").defaultstroke
                        }, animTime);
                    }
                }
            });
        };
    var $ToolTips = jQuery("div.imagemap_legend_tooltip");
    $ToolTips.css("display", "none");

    jQuery("div.imagemap_legend_label").click(function(event) {
        if (jQuery(this).hasClass("active")) {
            jQuery(this).parent().children("div.imagemap_legend_tooltip").css("display", "none");  
            jQuery(this).removeClass("active");
        } else {                
            jQuery("div.imagemap_legend_label.active").parent().children("div.imagemap_legend_tooltip").css("display", "none");
            jQuery("div.imagemap_legend_label.active").removeClass("active");
            jQuery(this).parent().children("div.imagemap_legend_tooltip").css("display", "block");
            jQuery(this).addClass("active");
        }
    });

click

var lastTooltipCloseButton = document.getElementById('close');
if(lastTooltipCloseButton != null) {
lastTooltipCloseButton.parentNode.style.display = 'none';
lastTooltipCloseButton.remove();
}
var id = this.data("id");
var svg = document.getElementsByTagName('svg')[0];
var image = svg.parentNode;
var imageId = image.id;
var prefix = imageId.replace("_image","");
var tooltip = document.getElementById(prefix+'_tooltip_' + id);
            if (tooltip != null && image != null) { 
                mouseCoords(evt); 
                tooltip.style.display = 'block';
                tooltip.style.position = 'absolute'; 
                var left = (document.getElementById(prefix+'_image').offsetWidth)/2-(tooltip.clientWidth/2);
                if (left < 0) left = 0; 
                var top = (document.getElementById(prefix+'_image').offsetHeight)/2-(tooltip.clientHeight/2);
                if (top < 0) top = 0;
                tooltip.style.display = 'block';
                tooltip.style.position = 'absolute';
                tooltip.style.left = left + 'px';
                tooltip.style.top = top + 'px';
                var cls = tooltip.getAttribute('class').split(" ");
                for (var i = cls.length - 1; i >= 0; i--) {
                    if (cls[i] != "active" && i == 0) {
                        cls.push('active');
                    }
                }
                tooltip.setAttribute('class', cls.join(" "));
            }
var closeButton = tooltip.querySelector('#close');
if (closeButton!= null) tooltip.removeChild(closeButton);
tooltip.innerHTML = tooltip.innerHTML + '<button type="button" id="close" class="close" style="position: absolute; top: 5px; right: 5px; padding:1px 6px; margin: 0 0 0 5px;opacity: 1;background: #000000;" onclick="this.parentNode.style.display = &apos;none&apos;;">&#120;</button>';

Fügen Sie folgenden CSS-Code in Ihr Projekt:

.imagemap_content {
    position: relative;
}
.imagemap_content .imagemap_tooltip {
    display: none;
    position: absolute;
    background: #ffffff;
    border: 1px solid #808080;
    padding: 5px 8px;
    margin: 0;
    /* max-width: 250px; */
}
.imagemap_tooltip_content {
    float: left;
    margin: 0 10px 0 0;
}
.imagemap_tooltip_content:last-of-type{
    margin: 0;
}
.imagemap_content .imagemap_tooltip.active { display: block;  margin:0 0 0 0px; z-index: 999;}
.imagemap_content .imagemap_tooltip p { margin: 0; }
.imagemap_content .imagemap_tooltip p + p { margin-top: 10px; }
.imagemap_zoom_in,
.imagemap_zoom_out,
.imagemap_zoom_reset {
    border: 0 none !important;
    margin: 0 !important; padding: 0 !important;
    display: inline-block;
    width: 24px !important; height: 24px !important;
    text-indent: -9999px;
}
.imagemap_zoom_in { background: url('button-zoom-in.png') no-repeat scroll center center transparent !important; }
.imagemap_zoom_out { background: url('button-zoom-out.png') no-repeat scroll center center transparent !important; }
.imagemap_zoom_reset { background: url('button-zoom-reset.png') no-repeat scroll center center transparent !important; }
.imagemap_preload {
    background: rgb(0, 0, 0) transparent;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    text-align: center;

}

.imagemap_legend_label {
    font-size:22px;
}

.imagemap_preload > .imagemap_preload_inner { padding-top: 30%; }

.imagemap_legend {
    display: none;
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;

}
.imagemap_legend_bottom { }
.imagemap_legend_top { }
.imagemap_legend_left { float:left; }
.imagemap_legend_right { float:right; }
.imagemap_legend .imagemap_legend_line {
    text-align: center;
}
.imagemap_legend .imagemap_legend_label {
    width: 100%;
    display: inline-block;
    text-align: left;
    border-bottom: 1px solid #000;
}
.imagemap_legend .imagemap_legend_tooltip {
    width: 100%;
    display: inline-block;
    font-size: 0.7em;
}
@media screen and (max-width: 450px) {
    .imagemap_legend_shown .imagemap_legend { display: block; }
    .imagemap_legend_shown .imagemap_content { display: none; }
    .imagemap_tooltip_content {
        color: #fff;
        float: none;
        font-size: 14px;
    }
    .imagemap_legend_label {
        color: #fff;
    }
}
.imagemap_legend_shown.tablet .imagemap_legend,
.imagemap_legend_shown.mobile .imagemap_legend { display: block; }
.imagemap_legend_shown.tablet .imagemap_content,
.imagemap_legend_shown.mobile .imagemap_content { display: none; }