浮动小窗口的学习

2019独角兽企业重金招聘Python工程师标准>>>

效果地址：

首先 脚本创建需要弹出的窗体

 function create_float_window() {

        var float_window_html = '';

        float_window_html += '<div id="float_window">' +

                '<input id = "clear" type="button"/>' +

                '<input id = "cancel" οnclick="clear_float_window()" type="button"/>' +

                '<input id = "save" οnclick="clear_float_window()" type="button"/>' +

                '</div>';

        var float_window = document.createElement('div');

        float_window.innerHTML = float_window_html;

        document.body.appendChild(float_window);

    }

然后：给三个小块添加样式：

input{

            background: none repeat scroll 0 0 #DDDDDD;

            border:1px solid #FFFFFF;

            border-radius:4px;

            height:25px;

            width:25px

        }

主要是  背景色和大小

然后：再给三个小框添加点击的样式（鼠标经过）

 input:hover{

            border-color:#AAAAAA;

            cursor:pointer;

        }

然后：添加整个窗体的浮动效果

 #float_window{

            display: inline;

            backgroud-color:#CCCCCC;

            border:1px solid #888888; /*加框*/

            border-radius:5px; /*圆角*/

            bottom:40px; /*底部边距*/

            padding:5px;

            position: fixed; /*位置绑定*/

            right: 50px;

            z-index: 10;

        }

最后添加浮动小框的清除操作

 function clear_float_window() {

        $("#float_window").fadeOut("slow");

        $("#float_window").remove();

    }

最后一张实现的效果图，

转载于:https://my.oschina.net/NV9rBbk/blog/196490