jQuery實現(xiàn)簡單彈出框效果實例

更新時間：2023年06月30日 10:51:19 作者：zhengvipin

這篇文章主要給大家介紹了關(guān)于jQuery實現(xiàn)簡單彈出框效果的相關(guān)資料,幾天一直在研究JQuery,確實很好用,有很多需求都是要彈出框,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

功能點

1、點擊“更多”出現(xiàn)彈出框

2、點擊下拉列表觸發(fā)回調(diào)

3、點擊空白區(qū)域收起彈出框

效果演示

Popover demo

PS：鼠標右鍵效果圖`另存為`到本地，再將圖片后綴gif改為rar即可得到完整代碼壓縮包。

實現(xiàn)思路

1、提前聲明彈出標識做判斷；

2、通過jQuery的has()、is()或其他類似方法判斷點擊的是彈出層以外的空白區(qū)域。

PS：太久不寫jQuery了，很生疏了...

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popover of Jquery</title>
    <link rel="stylesheet" href="./index.css" rel="external nofollow" >
</head>
<body>
    <div class="container">
        <!-- 彈出框html START -->
        <span class="popover-wrapper">
            <button class="reference" type="button">更多</button>
            <div class="popover">
                <input class="search" type="text" placeholder="搜索...">
                <ul class="unstyled list">
                    <li><a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >示例選項1</a></li>
                    <li><a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >示例選項2</a></li>
                    <li><a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >示例選項3</a></li>
                    <li><a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >示例選項4</a></li>
                    <li><a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >示例選項5</a></li>
                </ul>
            </div>
        </span>
        <!-- 彈出框html END -->
        <div class="logs"></div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="./index.js"></script>
</html>

JS

//Popover plugin
(function ($) {
 
    //默認參數(shù)
    var defaults = {
        //觸發(fā)器
        reference: '.reference',
        //彈出層
        popover: '.popover',
        //下拉列表
        dropdown: '.popover > .list',
        //回調(diào)函數(shù)
        callback: function () { }
    };
 
    /**
     * 構(gòu)造函數(shù)
     * @param options 參數(shù)
     * @constructor
     */
    function Plugin(options) {
        this.options = $.extend({}, defaults, options || {});
        this.$reference = $(this.options.reference);
        if (!this.$reference.length) {
            return;
        }
        this.$popover = $(this.options.popover);
        if (!this.$popover.length) {
            return;
        }
        this.render();
    }
 
    Plugin.prototype = {
        /**
         * 渲染主方法
         */
        render: function () {
            this.$dropdown = $(this.options.dropdown);
            //標識聲明
            this.popoverShow = false;
            //事件綁定
            this.bindEvent();
        },
        /**
         * 綁定事件
         */
        bindEvent: function () {
            this.bindPopoverShow();
            this.bindPopoverHide();
            this.bindDropdownClick();
        },
        bindPopoverShow: function () {
            var that = this;
            that.$reference.bind('click', function (e) {
                if (that.popoverShow) {
                    that.$popover.fadeOut();
                    that.popoverShow = false;
                } else {
                    that.$popover.fadeIn();
                    that.popoverShow = true;
                }
                //阻止冒泡，避免彈出時觸發(fā)document點擊
                e.stopPropagation();
            })
        },
        bindPopoverHide: function () {
            var that = this;
            $(document).bind("click", function (e) {
                if (that.popoverShow) {
                    if (
                        !that.$popover.is(e.target) &&
                        that.$popover.has(e.target).length === 0
                    ) {
                        that.$popover.fadeOut();
                        that.popoverShow = false;
                    }
                }
            });
        },
        bindDropdownClick: function () {
            var that = this;
            that.$dropdown.children().bind('click', function (e) {
                //關(guān)閉懸浮框
                that.$popover.fadeOut();
                that.popoverShow = false;
                //執(zhí)行回調(diào)
                (typeof that.options.callback === 'function') &&
                    that.options.callback.call(this, "");
            })
        }
    };
 
    window.Popover = Plugin;
 
})(jQuery);
 
/**
 * 渲染入口
 * @param options
 * @returns {Plugin}
 */
new Popover({
    //觸發(fā)器
    reference: '.reference',
    //彈出層
    popover: '.popover',
    //下拉列表
    dropdown: '.popover > .list',
    //回調(diào)函數(shù)
    callback: function () {
        $('.logs').append('<p>【' + $(this).text() + '】被選中了...</p>');
    }
});

CSS

button {
    background-color: #eee;
    font-weight: 300;
    font-size: 16px;
    font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-decoration: none;
    text-align: center;
    line-height: 28px;
    height: 28px;
    padding: 0 16px;
    margin: 0;
    display: inline-block;
    appearance: none;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition: all .3s;
}
 
button:focus,
button:hover {
    background-color: #f6f6f6;
    text-decoration: none;
    outline: 0;
}
 
button:active {
    text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
    text-decoration: none;
    background-color: #eee;
    border-color: #cfcfcf;
    color: #999;
    transition-duration: 0s;
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
 
ul.unstyled {
    padding: 0;
    margin: 0;
    list-style: none;
}
 
ul.unstyled>li {
    list-style-type: none;
}
 
.popover-wrapper {
    position: relative;
}
 
.popover-wrapper .popover {
    padding: 8px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    width: 150px;
    position: absolute;
    right: 0;
    top: 28px;
    margin-top: 4px;
    display: none;
}
 
.popover-wrapper .popover .search {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 28px;
    line-height: 28px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
}
 
.popover-wrapper .popover .list {
    margin-top: 4px;
}
 
.popover-wrapper .popover .list li a {
    display: block;
    padding: 4px 8px;
    text-decoration: none;
    color: #000;
    transition: all .3s;
}
 
.popover-wrapper .popover .list li a:hover,
.popover-wrapper .popover .list li a:focus {
    background: rgba(39, 174, 96, 0.2);
}
 
.popover-wrapper .popover .list li a:active {
    background: rgba(39, 174, 96, 0.8);
}
 
.logs {
    display: inline-block;
    vertical-align: text-top;
    width: 400px;
    padding: 8px;
    border: 1px solid;
    height: 400px;
    overflow: auto;
    margin-left: 16px;
}
 
.logs>p {
    margin: 0 0 8px;
}
 
.container {
    height: 600px;
    width: 600px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}