Add unique ID's to modals with the scene ID it contains for individual custom styling

You may want to have different styles ie width and size to certain modal pop ups. At the moment you cannot do because modals do not have a unique identifier.

This code takes the current scene and then adds the scene ID as a new class to the modal meaning you can have individual styles for each modal pop up.

$(document).on('knack-scene-render.any', function() {
  if ($('.kn-modal').length > 0) {
  $(this).find('.kn-modal').addClass('Modal_for_' + Knack.router.current_scene_key)
} else {
  console.log('no modal here')

You can then apply your css to that individual Modal like this.

.Modal_for_scene_1 {
    background: orange!important;
    width: 90%;
    height: 90vh;

.Modal_for_scene_2 {
    background: #dad8d6!important;
    width: 50%;
    height: 30vh;

Great idea and work Johnny - thank you for this.

1 Like

@Roger You’re welcome