Customizing an Unpoly modal layer to look like a Bootstrap modal #768

panda-madness · 2025-07-18T12:12:50Z

panda-madness
Jul 18, 2025

In an effort to unify how modals look in my application I have come up with the following customizations:

// styles
up-modal {
    up-modal-box {
        padding: 0;
        background: none;
        border-radius: var(--bs-border-radius-lg);
    }

    &:has(.modal-header [up-dismiss]) {
        up-modal-dismiss {
            display: none;
        }
    }
}

// Add appropriate bootstrap classes
up.on('up:layer:opened', function(event, $modal) {
    if (event.layer.mode !== 'modal') {
        return;
    }

    $modal.classList.add('modal', 'show');
    $modal.style.display = 'block';

    $modal.querySelector('up-modal-box')?.classList.add('modal-dialog');
    $modal.querySelector('up-modal-content')?.classList.add('modal-content');
});

It is up to you to make sure the layer response has the appropriate .modal-header, .modal-body, .modal-footer elements:

// layer response
<div up-main="modal">
  <div class="modal-header">
  </div>
  <div class="modal-body">
  </div>
  <div class="modal-footer">
  </div>
</div>

So far this seems to work pretty well, though my use case is pretty standard, so I have not run into any edge cases.

Hope this might be useful to someone.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Customizing an Unpoly modal layer to look like a Bootstrap modal #768

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Customizing an Unpoly modal layer to look like a Bootstrap modal #768

Uh oh!

Uh oh!

panda-madness Jul 18, 2025

Replies: 0 comments

panda-madness
Jul 18, 2025