layer因?yàn)椴僮骱唵?#xff0c;界面美觀，是開發(fā)消息彈窗的不二選擇。一般我們都會(huì)讓消息框采用浮動(dòng)效果顯示在屏幕正中間，但是如果我們的需求是彈框顯示在鼠標(biāo)點(diǎn)擊位置的左下角，而且是隨滾動(dòng)條移動(dòng)的，就像bootstrap的popover組件，該如何實(shí)現(xiàn)呢。

ayer本身有很多操作參數(shù)，涉及定位的是offset參數(shù)，預(yù)設(shè)的有上下左右和四個(gè)邊角，以及中間浮動(dòng)。因?yàn)檫@幾種預(yù)設(shè)都不能達(dá)到要求，只能使用自定義坐標(biāo)來實(shí)現(xiàn)。

要實(shí)現(xiàn)這個(gè)需求首先要改動(dòng)的是fixed參數(shù)，需要把原來的浮動(dòng)效果去掉，所以fixed參數(shù)值設(shè)為false,接下來就是獲得點(diǎn)擊位置的坐標(biāo)了。根據(jù)以往經(jīng)驗(yàn)，x坐標(biāo)取clientX也就是瀏覽器的x坐標(biāo)位置，y坐標(biāo)取pageY或者clientY+scrollY也就是文檔y坐標(biāo)。按預(yù)期設(shè)想，彈框會(huì)出現(xiàn)在點(diǎn)擊位置的右下角位置。

但是，通過測試會(huì)發(fā)現(xiàn)結(jié)果并不如意。在縱向滾動(dòng)條置頂時(shí)點(diǎn)擊出現(xiàn)彈框是正常的，當(dāng)拉下滾動(dòng)條時(shí)就開始出現(xiàn)偏差，而且拉得越下偏差越大。經(jīng)多次實(shí)驗(yàn)，發(fā)現(xiàn)原因是layer會(huì)自做聰明得把彈框位置在預(yù)定義值的基礎(chǔ)上加上scrollY,相當(dāng)于結(jié)果值多了一個(gè)scrollY值。這樣事情就簡單了，把多的值減掉。clientY+scrollY-scrollY=clientY。因此offset的y坐標(biāo)值直接使用clientY。通過測試，彈框果然顯示在了點(diǎn)擊位置的右下角。

到這里離我們的目標(biāo)只有一步之遙了，右下角到左下角差了一個(gè)消息框的寬度，而彈框?qū)挾仁亲远x的，直接減掉ok。

$('.edit').click(function(e){ layer.open({type: 1,area:'300px',offset: [e.clientY+'px',(e.clientX-310)+'px'],id: 'layerDemo2'//防止重復(fù)彈出,content: $('#dialog'),'fixed':false,shade: 0 //不顯示遮罩,yes: function(){layer.closeAll();}});})

總結(jié)

以上是生活随笔為你收集整理的如何点击按钮弹出弹框显示几秒_layer消息框显示在鼠标旁边的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。