求一段弹出窗口代码

Question

求一段代码，打开一个网页时就在屏幕的右下角弹出一个窗口，并且这个窗口的右上角有一个隐藏窗口内容的图标，点击图标时，窗口的内容隐藏，同时窗口只剩下一个标题，并且向下收缩；当再点击窗口显示图标时，窗口内容显示，同时窗口向上拉伸。 那位JS高手帮帮忙，谢谢  

Answer 1

%3Cp%3E%u9875%u9762%u7684%u7684div%u7684%u663E%u793A%u3001%u9690%u85CF%u3002%3C/p%3E%0A%3Cp%3E1%u3001%u5E94%u7528jquery%u63A7%u5236%u7A97%u4F53div%u4E2D%u7684bodyDiv%u7684%u663E%u793A%u4EE5%u53CA%u663E%u793A%u6548%u679C%uFF0C%u4EE5%u53CA%u63A7%u5236%u663E%u793A%u4F4D%u7F6E%u3002%3C/p%3E%0A%3Cp%3E2%u3001%u5728%u7A97%u4F53div%u4E2DheaderDiv%u4E2D%u589E%u52A0%u56FE%u7247%u63A7%u5236%u663E%u793A%u3001%u9690%u85CF%u3014%u4E8B%u4EF6%u3015%3C/p%3E%0A%3Cp%3E3%u3001%24%28function%28%29%7B%7D%29%u63A7%u5236%u6253%u5F00%u9875%u9762%u52A0%u8F7D%u7A97%u53E3%u3002%3C/p%3E%0A%3Cdiv%20class%3D%22cnblogs_code%22%3E%0A%3Cpre%3E%3Cdiv%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ebody%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ediv%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%u9875%u9762%u65B0%u6697%u793A%u5185%u5BB9%3Cbr%20/%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ediv%20id%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3D%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3EWinDiv%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%20style%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3D%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3Edisplay%3Anone%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ediv%20id%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3D%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3EheaderDiv%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Eimg%20id%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3D%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3Ehidde%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%20onclick%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3D%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%u9690%u85CF%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E/%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%20%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Eimg%20id%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3D%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3Eopen%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%20onclick%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3D%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%u663E%u73B0%28%29%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E/%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B/%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ediv%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ediv%20id%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3D%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3EbodyDiv%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23800000%3B%22%3E%22%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%u663E%u793A%u5185%u5BB9%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B/%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ediv%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B/%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ediv%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B/%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ediv%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B/%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Ebody%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Escript%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%3Cbr%20/%3E%24%28function%28%29%7B%3Cbr%20/%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23008000%3B%22%3E//%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23008000%3B%22%3Ejquery%u8BBE%u7F6EWinDiv%u7684%u4F4D%u7F6E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23008000%3B%22%3E//%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23008000%3B%22%3Ejquery%u7ED1%u5B9AbodyDiv%u663E%u793A%u7684%u6548%u679C%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23008000%3B%22%3E%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%3Cbr%20/%3E%7D%29%3Cbr%20/%3E%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26lt%3B/%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3Escript%3C/span%3E%3Cspan%20style%3D%22color%3A%20%23000000%3B%22%3E%26gt%3B%3C/span%3E%3C/div%3E%3C/pre%3E%0A%3C/div%3E