jQuery实现悬浮窗口

jQuery实现悬浮窗口

我的独立博客 Marsguest’s Blog

最近有这样的一个需求就是在网页上实现点击特定的控件实现弹出窗口进行一些表单的提交之类。最终实现的大致效果如下:

这里写图片描述

首先,应该明确一点,即便是弹出窗口,也是通过控制div的display属性实现的。具体步骤分为以下三点:

1. 建立窗口的div,注意position设置成absolute,这样以后可以自己调整它在网页上的位置。

2.建立弹出窗口时背景为黑色的div,通过调整div的重叠属性z-index,从而实现黑色背景遮挡之前的主界面,然后将窗口div设置到黑色背景之上。

3.设置关闭按钮,点击关闭后隐藏背景和div窗口,显示主界面。


HTML代码

<body> 
        <div>这是一个主界面</div><br>
        <button id="btn">点击这里实现弹窗</button>
        <div id="choiceWindow">
            <label id="x" style="position: absolute;top:2px;left: 95%;font-size: 25px;">x</label>
            <form>
                <label>请选择开课学期:</label>&nbsp &nbsp  &nbsp 
                <select>
                    <option value="2017-2018-1">2017-2018-1</option>
                    <option value="2017-2018-2">2017-2018-2</option>
                </select><br><br>

            </form>
        </div>
        <div id="backGround"></div>
    </body> 

其中的x就是实现一个简单的关闭按钮


CSS代码

<style type="text/css">
        #choiceWindow {
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 25%; 
            width: 30%; 
            height: 55%; 
            padding: 20px; 
            border: 3px solid #ccc; 
            background-color: white;
            z-index:2; 
            overflow: auto; 
        }
        #backGround {
            display: none; 
            position: absolute; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 1100px; 
            background-color: black; 
            z-index:1; 
            -moz-opacity: 0.8; 
            opacity:.80; 
            filter: alpha(opacity=88);
        }
        #x:hover {cursor: pointer;color: rgb(55,198,192);}
        </style>

简单解释一下:

1.z-index就是调整z轴位置也就是不同div上下层关系,数值越大越靠上。
2.overflow属性即div中内容超出div所能够承载的大小后能够自动的显示滚动条实现剩余文字的显示。
3.-moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=88);均为设置透明度,这里不再赘述。
4.最后x就是简单设置鼠标移到x上的样式变化。


JS代码

<script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    $("#choiceWindow").slideDown(300);
                    $("#backGround").show();

            });

            $("#x").click(function(){
                $("#choiceWindow").slideUp(300);
                $("#backGround").hide();
            })

            });
        </script>

用了slide让整个效果更佳有动感。js需自行导入jQuery。

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值