Multiple popup styles for Leaflet

Question

I have created a popup that opens when the map is loaded. This is being used as a splash screen. I have updated the CSS with the following so it looks the part:

.custom-popup, .leaflet-popup-content-wrapper {
    background:#2c3e50;
    color:#fff;
    font-size:12px;
    line-height:10px;
    border-radius: 10px;
    }

.custom-popup, .leaflet-popup-content-wrapper a {
    color:rgba(255,255,255,0.1);
    }

.custom-popup, .leaflet-popup-tip-container {
    width:30px;
    height:15px;
    }

.custom-popup, .leaflet-popup-tip {
    background: transparent;
    border: none;
    box-shadow: none;
    }

JS:

var startpopup = L.popup({
    closeButton: true,
    autoClose: true,
    keepInView: true
    })
    .setLatLng(map.getBounds().getCenter())
    .setContent('<p>DISCLAIMER TEXT.</p>')
    .openOn(map);

However this is applied to all my popups that I have created for my different layers. I only want the above CSS applied to my splash screen popup. How do I revert back to the original CSS for popups after the splash screen popup is removed?

Answer 1

You should assign a different classname and define the relative CSS style for each kind of popup:

var popup = L.popup({
    closeButton: true,
    autoClose: true,
    className: "custom-popup" // classname for the popup acting like a splash screen
})
  .setLatLng(map.getBounds().getCenter())
  .setContent('<p>Some Disclaimer Text.</p>')
  .openOn(map);

For instance, if we have a marker we can bind the popup with its options containing the popup classname:

var popupContent = "<b>Hello world!</b><br />I am a popup.";
var popupOptions =
    {
      'maxWidth': '500',
      'className' : 'another-popup' // classname for another popup
    }
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup(popupContent, popupOptions);

This could be the style for the another-popup classname:

/*another-popop style*/
.another-popup .leaflet-popup-content-wrapper {
  background: #2ce897;
  color: #eee;
  font-size: 12px;
  line-height: 24px;
  border-radius: 0px;
}
.another-popup .leaflet-popup-content-wrapper a {
  color: rgba(200, 200, 200, 0.1);
}
.another-popup .leaflet-popup-tip-container {
  width: 50px;
  height: 15px;
}
.another-popup .leaflet-popup-tip {
  background: transparent;
  border: none;
  box-shadow: none;
}

Codepen