как наносить множественные всплывающие окна на цвет фона - PullRequest
Новая
       9

как наносить множественные всплывающие окна на цвет фона

0 голосов
/ 16 октября 2019

У меня есть рабочий код, который отображает множество функций, и когда я нажимаю на каждую функцию, она отображает всплывающее окно, но я хотел бы показать его в разных цветах фона, например. отображаются три всплывающих окна, и каждый из них имеет свой фоновый цвет. 

// display popup on click
map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(evt.pixel,
    function(feature) {
      return feature;
    });
  if (feature) {
    var element = document.getElementById(feature.get('name'));
    var popup = new Overlay({
      element: element,
      positioning: 'bottom-center',
      stopEvent: false,
      offset: [0, -15]
    });
    map.addOverlay(popup);

    var coordinates = feature.getGeometry().getCoordinates();
    popup.setPosition(coordinates);
    $(element).popover({
      placement: 'top',
      html: true,
      content: feature.get('name')
    }); 
    $(element).popover('toggle');
    //$(".popover").css("background", "#C71F1F");   
  }
});

он использует только «.popover», но я бы хотел использовать «.popover1» и «.popover2»используя код JS. 

//CSS
.popover{
   background: #ebd997;
}
.popover1{
   background: #C71F1F;
}
.popover2{
   background: #FFE600;
}

1 Ответ

0 голосов
/ 17 октября 2019

Я только что решил, я создал новый и новый стиль CSS, как этот 

var iDiv = document.createElement("div");
iDiv.id = "mydiv"+index;
document.getElementsByTagName('body')[0].appendChild(iDiv);

CSS 

var css = '#' + iDiv.id + ' + .popover {background:#FFFFFF;}';
var head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
...