layer因為操作簡單，界面美觀，是開發消息彈窗的不二選擇。一般我們都會讓消息框采用浮動效果顯示在屏幕正中間，但是如果我們的需求是彈框顯示在鼠標點擊位置的左下角，而且是隨滾動條移動的，就像bootstrap的popover組件，該如何實現呢。

ayer本身有很多操作參數，涉及定位的是offset參數，預設的有上下左右和四個邊角，以及中間浮動。因為這幾種預設都不能達到要求，只能使用自定義坐標來實現。

要實現這個需求首先要改動的是fixed參數，需要把原來的浮動效果去掉，所以fixed參數值設為false,接下來就是獲得點擊位置的坐標了。根據以往經驗，x坐標取clientX也就是瀏覽器的x坐標位置，y坐標取pageY或者clientY+scrollY也就是文檔y坐標。按預期設想，彈框會出現在點擊位置的右下角位置。

但是，通過測試會發現結果并不如意。在縱向滾動條置頂時點擊出現彈框是正常的，當拉下滾動條時就開始出現偏差，而且拉得越下偏差越大。經多次實驗，發現原因是layer會自做聰明得把彈框位置在預定義值的基礎上加上scrollY,相當于結果值多了一個scrollY值。這樣事情就簡單了，把多的值減掉。clientY+scrollY-scrollY=clientY。因此offset的y坐標值直接使用clientY。通過測試，彈框果然顯示在了點擊位置的右下角。

到這里離我們的目標只有一步之遙了，右下角到左下角差了一個消息框的寬度，而彈框寬度是自定義的，直接減掉ok。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。