Putting elements infront of backdrop

1

Any idea how to put elements infront of backdrop? like when you longpress on Messages in IOS iMessage?

2

I think you need to use a bit customized popover/actions for this case

3

I have managed todo it with that:

                    opened: function (picker) {
                        var backdropElement = card[0].cloneNode(true)
                        var cardBounding = card[0].getBoundingClientRect()
                        self.$(backdropElement).css({
                            position : 'absolute',
                            top : cardBounding.top - cardBounding.x + 'px',
                            width: card[0].offsetWidth + 'px',
                            opacity: '0',
                            transition: 'opacity .25s ease-in-out',
                        });
                        self.$(backdropElement).find('swipeout-actions-right').remove();
                        self.$(picker.modal.backdropEl).append(backdropElement);
                        self.$(backdropElement).css({
                            opacity: '1',
                        });
                    },

and that is the result:

html(iPhone%206_7_8)
127.0.0.1_57913_index.html(iPhone 6_7_8).png750Ă—1334 75.8 KB

transitions seems to not work and when clicking on the element it leads to the next page but upon return the sheet pushstate is there and causes a no page found error

4

What are trying to achieve here? To disable transition when “backdrop” opened? In this case if your card has href attribute you can also replace it like self.$(backdropElement).removeAttr('href')

5

I wanted the element to fade in once it is appended to the backdrop i have removed the href, everything works fine excep the fade in transition

6

Try tweak this:

self.$(picker.modal.backdropEl).append(backdropElement);
self.$(backdropElement).css({
  opacity: '1',
});

to this:

self.$(picker.modal.backdropEl).append(backdropElement);
const _reflow = backdropElement.offsetHeight;
self.$(backdropElement).css({
  opacity: '1',
});
1 Like
7

thanks it works, i just messed up something!

1 Like