//html部分
彈出框確定
取消//css部分
.wrap
.popupbox
.layer-head
.layer-head-text
.layer-close
.layer-body
.layer-footer
.layer-footer-button-group
.layer-footer-button
.layer-sure
.layer-cancel
//點選某物體時,用drag物件即可,move和up是全域性區域,也就是整個文件通用,應該使用document物件而不是drag物件(否則,採用drag物件時物體只能往右方或下方移動)
$(document).on('mousedown', '.layer-head', function(e)
if ($(e.target).hasclass('layer-close'))
var diffx = e.clientx - drag.offset().left; //滑鼠點選物體那一刻相對於物體左側邊框的距離=點選時的位置相對於瀏覽器最左邊的距離-物體左邊框相對於瀏覽器最左邊的距離
var diffy = e.clienty - drag.offset().top;
$(document).on('mousemove', function(e) else if (left > window.innerwidth - drag.width())
if (top < 0) else if (top > window.innerheight - drag.height())
//移動時重新得到物體的距離,解決拖動時出現晃動的現象
drag.css();
});$(document).on('mouseup', function(e) );
});
可拖拽彈出框
效果 父元件 v if showdrag close closedrag class canvas v if onshow drawingboard v else showingboard class btn click changestatus 切換狀態button div drag window...
關閉彈框事件 簡單的彈出框拖拽關閉事件
彈出框拖拽關閉事件 margin 0 padding 0 box width 500px height 250px background f2f2f2 border 1px ccc solid border radius 3px position absolute left calc 50 250p...
js彈出提問框訊息框警告框
警告 alert 在訪問 的時候,你遇到過這樣的情況嗎?咚 的一聲,乙個小視窗出現在你面前,上面寫著一段警示性的文字,或是其它的提示資訊。如果你不點選確定,你就不能對網頁做任何的操作。沒錯,這個 咚 的小視窗就是alert幹的。下面的 是一段使用alert的例項。我的個人觀點是盡量少使用alert,...