jQuery之浮动窗口实现代码(两种方法)

前言

前端开发中，弹出框是一个非常常见的需求，而浮动窗口又是其中的一种。在这篇文章中，我将介绍两种实现浮动窗口的方法，并给出相应的代码示例。

方法一：CSS + jQuery实现

这种方法的思路是先利用CSS定义浮动窗口的样式，然后用jQuery来控制其显示和隐藏。

CSS代码

下面是实现浮动窗口需要用到的CSS代码：

/*浮动窗口的样式*/
#float-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    background-color: #ffffff;
    border: 1px solid #333333;
    z-index: 999;
    display: none;
}

/*遮罩层的样式*/
#mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
}

其中，#float-box是浮动窗口的样式，#mask是遮罩层的样式。这里的样式比较简单，可以根据自己的需求进行定制。

jQuery代码

下面是使用jQuery来实现浮动窗口的代码：

//显示浮动窗口
function showFloatBox() {
    $("#float-box").fadeIn();  //显示浮动窗口
    $("#mask").fadeIn();  //显示遮罩层
}

//隐藏浮动窗口
function hideFloatBox() {
    $("#float-box").fadeOut();  //隐藏浮动窗口
    $("#mask").fadeOut();  //隐藏遮罩层
}

//点击按钮显示浮动窗口
$("#btn-show-float-box").click(function() {
    showFloatBox();
});

//点击关闭按钮隐藏浮动窗口
$("#btn-close-float-box").click(function() {
    hideFloatBox();
});

这段代码定义了两个函数showFloatBox和hideFloatBox，分别用来显示和隐藏浮动窗口。在函数内部，通过jQuery的fadeIn和fadeOut方法来实现显示和隐藏效果。另外，代码还定义了两个点击事件，当点击按钮时，调用showFloatBox函数显示浮动窗口；当点击关闭按钮时，调用hideFloatBox函数隐藏浮动窗口。

方法二：jQuery插件实现

这种方法是通过使用现成的jQuery插件来实现浮动窗口的效果，这种方法比较简单，但是缺少灵活性。

使用jQuery插件fancybox实现浮动窗口

要使用fancybox实现浮动窗口，需要先引入fancybox的相关文件：

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>

然后，在需要弹出浮动窗口的地方，设置一个链接，并给其添加class="fancybox"属性：

<a href="#float-box" class="fancybox">浮动窗口</a>

这里的#float-box是浮动窗口所在的容器。

最后，在jQuery代码中添加如下代码即可使用fancybox实现浮动窗口：

$(document).ready(function() {
    $(".fancybox").fancybox();  //启用fancybox
});

使用jQuery插件colorbox实现浮动窗口

要使用colorbox实现浮动窗口，也需要先引入colorbox的相关文件：

<link rel="stylesheet" type="text/css" href="colorbox/colorbox.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox-min.js"></script>

然后，在需要弹出浮动窗口的地方，设置一个链接，并给其添加class="colorbox"属性：

<a href="#float-box" class="colorbox">浮动窗口</a>

这里的#float-box是浮动窗口所在的容器。

最后，在jQuery代码中添加如下代码即可使用colorbox实现浮动窗口：

$(document).ready(function() {
    $(".colorbox").colorbox();  //启用colorbox
});

总结

本文介绍了两种实现浮动窗口的方法。第一种方法是利用CSS和jQuery来实现，这种方法比较灵活，可以根据自己的需求进行定制；第二种方法是利用现成的jQuery插件来实现，这种方法比较简单，但是缺少灵活性。无论使用哪种方法，都可以实现弹出浮动窗口的效果。