Can you make a mobile popup fullscreen AND locked in place?

  • 1
  • Question
  • Updated 2 years ago
  • In Progress
  • (Edited)
I am building a mobile page and would like my deck component to display a fullscreen locked popup. Considering the sliding panel w/ a deck click interaction isn't working, I need to resort to a popup for the time being. 

The feedback button on mobile pages is a perfect demonstration of what I am trying to accomplish. 

I was able to make my popup fullscreen, but it is still draggable. Any help on locking the popup in place is appreciated!

Video demonstrates the popup fullscreen(delayed b/c snippet to bring to top), the ability to drag (needs to be locked), and the desired feedback button. 

Photo of Josef Lagorio

Josef Lagorio

  • 3,414 Points 3k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Stephen Sells

Stephen Sells, Alum

  • 17,326 Points 10k badge 2x thumb
Have you thought about using a page include instead? Or perhaps link to a separate page? Why a locked pop up in mobile?
Photo of Josef Lagorio

Josef Lagorio

  • 3,414 Points 3k badge 2x thumb
I am using a page include in my popup. The reason I would prefer a full screen popup vs. a link to a new page is that I want to keep the user on the main screen without having to reload the main page when they close the redirected page. 

I was actually able to switch gears here and use a sliding panel from the deck(now that that works as of 11.0.4), but I am still curious if a full screen popup could be achieved (identical to the feedback popup). 
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 18,656 Points 10k badge 2x thumb
I have a scenario where I want the same page to be used for desktop and mobile. Pop up is the right solution for desktop, but I agree with Josef that a full screen “locked” version of the popup would be nice or an option to have pop ups open in a separate tab in mobile.
Photo of John Dahlberg

John Dahlberg, Champion

  • 4,670 Points 4k badge 2x thumb
I would use a tabset, which would keep the prior tab in memory.  You can use CSS to hide the tab header and a simple snippet to switch between tabs.  Here's a sample approach for you that we've further developed for a similar use case.