<div>Window area</div>

Currently there is a window just enclosed in div as above, but I want to make a window that can be erased with a cross button
I am thinking, but I asked a question because no code was found to help me search.

An advertising window is often displayed at the bottom right of the homepage of the pasted image, and it disappears when you press X.
I want to display an area on the page that can be erased with the cross in the upper right corner, like the ad window.

I want to make the bottom area rise up when I turn off the window.

Thank you.

Applicable source code

  • Answer # 1

    Try to build html/css to realize such a layout.
    What is the class of this frame (div) while drawing with a pen on a blank sheet of paper?
    (If you have another way of organizing the situation, that is there.)

    Consider whether to use animation as a way to erase the advertising area.
    Continuously reduce the vertical size of the advertisement element with the cross button
    If it reaches zero at the end, it may be possible to achieve it by setting display: none.
    You'll probably use js to change the vertical size continuously.
    Can jQuery be written simply using jQuery?

    Expand the success image and goal image
    Coding towards it,
    If you still hit the wall, you should ask a question at that time.