2 verschiedene Flyer-Popup-Stile

Question

Können Popups in der Broschüre zwei verschiedene Stile haben? Bei der Benutzerinteraktion werden zwei verschiedene Popups ausgelöst (in Bezug auf Stil und Inhalt), eines beim Mouseover und eines beim Klicken.

Problem: Ich versuche, einen CSS-Stil in .leaflet-popup-content-wrapper' zu überschreiben, der für ein Popup gilt Es ist jedoch nicht möglich, zur Laufzeit zwischen den beiden CSS-Stilen hin und her zu wechseln, möglicherweise weil das Popup-DOM-Element noch nicht geladen wurde.

marker.on('mouseover', function() {
    marker.bindPopup('<b>Hallo Welt</b>');
    marker.openPopup();
})

marker.on('click', function() {
    marker.bindPopup('<b>Klick klicken</b>');
    marker.openPopup();

    // Fehlgeschlagener Versuch, den Stil zu wechseln
    $('.leaflet-popup-content-wrapper').addClass('new-style');
})

Answer 1

可以向 bindPopup 方法传递一个 "options" 参数，该参数可以包含将添加到 div 的 "className" 属性对于弹出窗口：

marker.on('mouseover', function() {
    marker.bindPopup('<b>Hello world</b>',{className: 'mouseover-popup'});
    marker.openPopup();
})

marker.on('click', function() {
    marker.bindPopup('<b>Hello world</b>',{className: 'click-popup'});
    marker.openPopup();
})