class.php弹出框使用,分享一个非常好用的弹出框小技巧

相信大家或多或少都会见到这样的需求:

Paste_Image.png

如图所示，点击按钮弹出下面的弹出框，点击空白处或者关闭按钮弹出框就会关闭，但同时点击弹出框的里面的其他部分，不会使弹出框关闭。

好，我们按步骤来一步步实现，这里引入jQuery方便DOM操作。

1、实现点击按钮弹框弹出

这个很容易办到，就不多废话了，直接上代码:

document

#pop_box {

border: 1px solid #000;

background-color: #bce;

width: 300px;

height: 300px;

}

#pop_box.hide {

display: none;

}

#btn_close{

background: #71d7d0;

border-radius: 5px;

display: block;

padding: 10px;

width: 100px;

margin: 0 auto;

color: #fff;

}

点我弹出

我是一个弹出框

一个无聊的按钮

关闭弹出框

$('#btn_open').click((e) => {

$('#pop_box').removeClass('hide')

e.stopPropagation()

})

2、实现点击空白处弹框隐藏

这个时候，问题就来了，一般的思路肯定是给document绑定一个点击事件，然后传入event参数，判断event.target的元素是不是弹出框里面的元素。但是很明显，弹出框里面包含的可不是一个元素，弹出框里面包含了多个子元素，用普通的直接判定event.target的方式肯定是不行的了。

那么怎么办呢，接下来就要介绍两个jQuery库里非常好用的函数了

一、 .is() 函数。它的用法总共有四种，这里就不一一介绍了，只介绍现在用到的一种:

.is(jQuery Object)

它传入的是一个jQuery对象，返回的是一个布尔值，用以判断当前对象与参数里的jQuery对象是否是同一个对象。

二、.has()函数。如果说.is()函数的作用一般般的话，那么这个.has()函数就厉害了。它的厉害之处就是可以方便的检查一个元素是否在另一个元素之内：

.has(jQuery Object)

需要注意的是，传入的参数是父元素，前面的对象是子元素。它返回的是一个包含jQuery对象的类数组对象，具有length属性，我们刚好可以利用这个length属性。当当前对象不属于传入的对象的时候，这个length就为0。

那么，利用这两个jquery函数，我们的代码就可以这么写：

$(document).click((e) => {

var box = $('#pop_box'),

btn_close = $('#btn_close')

e.stopPropagation

console.log(box.has(e.target).length)

if (!box.is(e.target) && box.has(e.target).length == 0) {

$('#pop_box').addClass('hide')

}

})

这样，就可以实现点击空白处弹出框隐藏的功能了。

最后，将上面代码改进，实现点击隐藏按钮，也能隐藏弹出框的功能:

$(document).click((e) => {

var box = $('#pop_box'),

btn_close = $('#btn_close')

e.stopPropagation

console.log(box.has(e.target).length)

if (!box.is(e.target) && box.has(e.target).length == 0 || btn_close.is(e.target) || btn_close.has(e.target).length > 0) {

$('#pop_box').addClass('hide')

}

})

这样，一个基本的弹出框的功能就大功告成了，下面贴出所有代码:

document

#pop_box {

border: 1px solid #000;

background-color: #bce;

width: 300px;

height: 300px;

}

#pop_box.hide {

display: none;

}

#btn_close{

background: #71d7d0;

border-radius: 5px;

display: block;

padding: 10px;

width: 100px;

margin: 0 auto;

color: #fff;

}

点我弹出

我是一个弹出框

一个无聊的按钮

关闭弹出框

$('#btn_open').click((e) => {

$('#pop_box').removeClass('hide')

e.stopPropagation()

})

$(document).click((e) => {

var box = $('#pop_box'),

btn_close = $('#btn_close')

e.stopPropagation

console.log(box.has(e.target).length)

if (!box.is(e.target) && box.has(e.target).length == 0 || btn_close.is(e.target) || btn_close.has(e.target).length > 0) {

$('#pop_box').addClass('hide')

}

})

如果大家有更好的方法实现此功能，请不吝赐教在评论区留言！