How to make a popup panel like on android?

  • 0
    How to make a popup panel like on android?

    like this
    JavaScript Milo Mora, Jan 12, 2020

  • 3 Answers
  • 0

    1. Make a block container with a minimum height to fit the entire viewport.

    2. We make 2 "slots" in it. The first one is the top one, where there is a line for the user to pull. The second is the content itself.

    3. We position it fixedly the way we like it - it is not visible at all, only a picture is visible, part of the content is visible.

    4. Add a click handler and a wheelbarrow to the picture. At the moment when the mouse button is down or the finger is not torn off the screen, we track the position of the cursor / finger on the document.

    5. Well, in fact, after the pointer is displaced, we change the position of our container.

    6. In order for this "window" to have states, it is worth adding a check. For example, if the current state is "closed \ open" and moved up / down by more than N pixels, then change the state to the opposite.

    7. Don't forget to remove handlers from the document when the mouse button is released or the finger is removed from the screen.

    8. In general - profit.





    Thus, states are responsible for how the element is displayed. Hidden or uncovered. The display changes when the state changes.

    Thus, it will not be necessary to open the window with your finger all the time. We changed the state variable - it opened / closed.

    States can be stored in the element's css classes.
    Anonymous

  • 0
    Do you want it to pop up when you press it, or so that you can move it by holding LMB?
    Anonymous

  • 0
    there is an example
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!