在前端开发中,弹出浮动窗口是一个常见的需求。本文将介绍如何使用JavaScript实现一个支持鼠标拖动和关闭的浮动窗口,并提供示例代码。
1. HTML结构和样式
我们先来实现HTML结构和样式。下面是一个简单的浮动窗口结构:
---- -------------- ---- --------------------- ----------- ------- ---------------------------- ------ ---- ------------------- -- ------ ------
我们需要为这个浮动窗口添加一些CSS样式以实现基本的布局和样式效果:
------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ ------ ------ ----------- ----- -------------- ---- ----------- - - ---- ------- -- -- ----- - ------------- - -------- ----- ---------------- -------------- ------------ ------- -------- ----- ----------- -------- ----------------------- ---- ------------------------ ---- - ------------- -- - ------- -- - ---------- - ---------- ----- ------ ----- ------- ----- ----------- ------------ ------- -------- - ----------- - -------- ----- -
这里使用了绝对定位和transform
属性将浮动窗口垂直和水平居中。同时,还添加了一些圆角和阴影效果,以及一个标题和关闭按钮。
2. JavaScript实现
接下来,我们需要使用JavaScript来实现拖动和关闭功能。下面是代码实现:
----- ----- - --------------------------------- ----- ------ - ------------------------------------- ----- -------- - ----------------------------------- --- ---------- - ------ --- ------- --- ------- --- ------- --- ------- -- ------ ------------------------------------ ----------- -- ------ ---------------------------------- ------------ -------- ------------ - -- --------------- ---------- - ----- ------ - ---------- ------ - ---------- ------ - ------ - ----------------- ------ - ------ - ---------------- -- ----------------------- -------------------------------------- -------- ------------------------------------ --------- - -------- --------- - -- ------------ - -- -------------- ----- ------- - --------- - ------- ----- ------ - --------- - ------- ---------------- - ------- - ----- --------------- - ------ - ----- - - -------- ---------- - -- ---- ---------- - ------ -- ------ ----------------------------------------- -------- --------------------------------------- --------- - -------- ------------ - -- ------ ------------------- - ------- -
代码很简单,首先获取modal
元素以及需要拖动的header
和关闭按钮closeBtn
。然后在header
上绑定mousedown
事件,当用户按下鼠标时开始拖动。我们记录下当前鼠标位置和偏移量,并添加mousemove
和mouseup
事件监听器,实现拖动效果。
在doDrag
函数中,计算出当前位置并将其设置为新的偏移值,从而实现弹出窗口随着鼠标拖动的效果。最后,在endDrag
函数中停止拖动并移除事件监听器。
在`
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/3825