JavaScript-自制网页内弹窗[可移动][DOM][纯HTML]

最新推荐文章于 2024-05-09 15:49:59 发布
最新推荐文章于 2024-05-09 15:49:59 发布
阅读量1.7k 收藏 5
点赞数 2
分类专栏： TDTX云笔记-CSDN云笔记化 文章标签： javascript html 前端 网页弹窗 DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54698498/article/details/127330446
版权

JavaScript-自制网页内弹窗[可移动][DOM][纯HTML]

1. 实现思路

  • 编写弹窗样式，display默认为none，position为absolute;
  • 点击弹出窗口按钮，弹出的display会设置为block，即可显示弹窗；
  • 编写弹窗的鼠标按下、抬起、移动、区域离开事件函数
  • 在移动时候，获取当前鼠标x/y与上一个鼠标x/y的差值deltaX/deltaY,
    然后计算新的距离父组件的左距离、上距离，
    设定该窗口的ddDiv.style.left 、addDiv.style.top即可让弹窗跟随鼠标的移动；
  • 在点击弹窗内“确认”、“取消”按钮后，弹窗的display会设置为none，即可关闭弹窗。

2.完整HTML文件代码

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <style>
            #root-div{
                width: 1000px;
                height: 1000px;

                border: 2px solid black;
            }
            #add-div{
                width: 600px;
                height: 400px;

                left: 200px;
                top: 200px;

                border: 1px solid rgb(111, 185, 204);

                position:absolute;

                display: none;
                
            }
            #title-div{
                width: 100%;
                height: 8%;
                background-color: cornflowerblue;
                color: white;
                font-weight: bold;
                font-size:1.4rem;
                user-select: none;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            #main-div{
                width: 100%;
                height: 84%;
            }
            #bottom-div{
                width: 100%;
                height: 8%;

                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
            }
            #ok-btn{
                margin-right: 10px;
                margin-top: 2px;
                margin-bottom: 5px;
                width: 100px;
                height: 30px;
                color: white;
                border: 0px;
                border-radius: 15px;
                background-color: rgb(91, 151, 241);
            }
            #ok-btn:active{
                background-color: rgb(65, 119, 199);
            }
            #no-btn{
                margin-right: 10px;
                margin-top: 2px;
                margin-bottom: 5px;
                width: 100px;
                height: 30px;
                color: white;
                border: 0px;
                border-radius: 15px;
                background-color: rgb(143, 142, 142);
            }
            #no-btn:active{
                background-color: rgb(97, 97, 97);
            }
            #add-btn{
                margin-right: 10px;
                margin-top: 10px;
                margin-left: 450px;
                width: 60px;
                height: 60px;
                color: white;
                border: 0px;
                font-weight: bold;
                font-size: 2rem;;
                border-radius: 30px;
                background-color: rgb(91, 151, 241);
            }
            #add-btn:active{
                background-color: rgb(65, 119, 199);
            }
        </style>
        <script>
            var downX = 0;
            var downY = 0;
            var isDown = false;
            function mouseDown(){
                const titleDiv = document.getElementById('title-div');
                titleDiv.innerHTML = '添加信息[准备...]';
                let disX = window.event.clientX;
                let disY = window.event.clientY;
                this.downX = disX;
                this.downY = disY;
                this.isDown = true
            }
            function mouseUp(){
                const titleDiv = document.getElementById('title-div');
                titleDiv.innerHTML = '添加信息';
                this.downX = 0;
                this.downY = 0;
                this.isDown = false;
            }
            function mouseLeave(){
                mouseUp();
            }
            function mouseMove(){
                const titleDiv = document.getElementById('title-div');
                const rootDiv = document.getElementById('root-div');
                const addDiv = document.getElementById('add-div');

                if(isDown === true){
                    titleDiv.innerHTML = '添加信息[移动中...]' 
                    let deltaX = window.event.clientX - this.downX;
                    let deltaY = window.event.clientY - this.downY;
                    this.downX = window.event.clientX;
                    this.downY = window.event.clientY;
                    let newOffsetLeft = addDiv.offsetLeft + deltaX;
                    let newOffsetTop = addDiv.offsetTop + deltaY;
                    let limitLeft = rootDiv.offsetWidth - addDiv.offsetWidth + 8;
                    let limitTop = rootDiv.offsetHeight - addDiv.offsetHeight + 8;

                    if(newOffsetLeft >= 8 && newOffsetLeft <= limitLeft){
                        if(newOffsetTop >= 8 && newOffsetTop <= limitTop){
                            addDiv.style.left = newOffsetLeft + 'px';
                            addDiv.style.top = newOffsetTop + 'px';
                        }
                    }
                }
            }
            function clickAdd(){
                const addDiv = document.getElementById('add-div');
                addDiv.style.display = 'block';
            }
            function clickOk(){
                const addDiv = document.getElementById('add-div');
                addDiv.style.display = 'none';
            }
            function clickNo(){
                const addDiv = document.getElementById('add-div');
                addDiv.style.display = 'none';
            }
        </script>
    </head>
    <body>
        <div id="root-div">
            <div id="add-div">
                <div id="title-div" onmousedown="mouseDown()" onmouseup="mouseUp()" onmousemove="mouseMove()" onmouseleave="mouseLeave()">添加信息</div>
                <div id="main-div"></div>
                <div id="bottom-div">
                    <button id="ok-btn" onclick="clickOk()">确认</button>
                    <button id="no-btn" onclick="clickNo()">取消</button>
                </div>
            </div>
            <button id="add-btn" onclick="clickAdd()">+</button>
        </div>
        
        
    </body>
</html>

3.自制可移动弹窗运行效果(gif)

在这里插入图片描述

TDTX
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
14---JavaScript-and-DOM-Manipulation
04-28
在 "14---JavaScript-and-DOM-Manipulation-master" 压缩包中，可能包含了示例代码、教程文档或练习项目，用于帮助学习者实践 JavaScript 和 DOM 操纵技巧。通过学习和实践这些内容，你可以更好地掌握如何在网页上...
Javascript-DOM编程艺术研究.docx
11-17
JavaScript-DOM编程艺术是Web开发中的核心技能，它涉及到如何使用JavaScript操作HTML或XML文档的结构、内容和样式。DOM，即文档对象模型（Document Object Model），是网页内容的抽象表示，它允许开发者通过编程方式...
【HTML】【JS】【CSS】实现可移动div窗体，超出浏览器大小将返回边缘。
南方者的博客
05-28 996
实现可移动div窗体，出现超出浏览器窗口大小时，将会返回到边缘边界处。实现流程：先创建节点，把节点塞进body内。对该节点进一步进行添加方法。（也可以直接创建好div并加上id，再在js里根据i...
HTML CSS JS 实现弹窗
qq_34870529的博客
04-18 7602
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
用HTML+CSS+JavaScript偷偷做一个浏览器里的弹窗吧！然后惊艳所有（不会做弹窗的）人！
最新发布
qq_44001153的博客
05-09 1090
用简单的前端语言（HTML+CSS+JavaScript）写一个（不够优雅但能解决当务之急的）弹窗出来
js实现广告移动窗口效果
weixin_48567214的博客
07-11 260
【代码】js实现广告移动窗口效果。
JavaScript_窗口的操作
cenyebao的专栏
02-10 442
窗口移动动画                      var bounce = {                 x: 0, y: 0, w: 200, h: 200, // Window position and size;                 dx: 5, dy: 5, // Window velocity(速度)_移动距离;                 inte
JavaScript⑤(常见网页特效案例、补充知识点、移动端网页特效、本地存储)
DeDeDeFeng的博客
08-27 537
移动端浏览器兼容性较好，我们不需要考虑以前JS 的兼容性问题，可以放心的使用原生JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件)，Android和IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。触屏touch事件说明touchstart手指触摸到一个 DOM 元素时触发touchmove手指在一个 DOM 元素上滑动时触发touchend。
VBScript-JavaScript-Dhtml-SQl-WSH-DOM-XML-CSS-ASp._VBScript HTML
09-24
VBScript JavaScript Dhtml SQL WSH DOM XML CSS ASp等12个参考手册
JavaScript网站网页右下角弹窗公告内容弹窗可自定义内容附带跳转链接
03-18
1.此代码为纯JS编写 2.适用于PC网站网页使用 3.需要显示的网页调用这个JS文件就好 4.适合放公告内容，标题，可设置跳转链接 5.下载遇到问题可随时联系我们解决 6.遵守CSDN相关规定，代码适用于开发者学习或者商业...
js-dom-fundamentals:JavaScript和DOM基础
05-18
JavaScript和DOM基础 如果您对JavaScript的基本知识充满热情，那么掌握它非常重要。 如果您具有扎实JavaScript基础知识，那么在开始使用新框架时，唯一需要熟悉的就是语法。 基本规则将是相同的，因为在所有抽象层下...
纯js漂亮各种弹出框
08-17
js 弹出提示框 对话框 网页 隐藏DIV层 等
纯js封装一个多功能弹出框
superfans98的专栏
05-30 6031
先上效果图 1、弹出一个类似prompt的输入框： 点击确定后，拿到输入的内容。点击取消关闭这个弹出框。 2、弹出一个自动消失的提示框： 3、弹出一个错误提示框： 4、弹出一个普通消息框： 5、弹出一个询问框： 6、等待框 封装实现： function showmsgbox(id) { this.obj = id; this.result = ""; } showmsgbox.prototype = { style: function (style) .
JavaScript 弹窗
笔记
02-24 4682
JavaScript弹窗是Web开发中常见的交互方式之一。弹窗可以为用户提供提示、警告或者输入框等交互方式，让用户在使用网站或应用时更加便捷。在本文中，我们将讨论JavaScript弹窗的作用、类型和用途。
【JavaScript】JS中类似宏变量、宏替换的用法（eval和 new Function）
【敦厚的曹操】的专栏
02-16 1484
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
HTML 常见的JS弹窗
YGRQG的博客
02-02 7594
HTML 常见的三种JS弹窗
JS 写弹窗
Benxiaohai_311的博客
12-08 3484
我们平常在项目中，通常需要给用户操作的结果进行提示，但是js默认给出的提示弹窗样式又比较丑，所以我们可以自己封装弹出层，用来给用户做不同的提示
制作一个简单的可移动窗口
why404
09-04 346
一个简单的可移动窗口React组件
JS中利用alert实现弹窗的两种方法
热门推荐
Ccodegod7的博客
05-30 1万+
JS中alert的使用 JS中利用alert实现弹窗的两种方法 提示：以下是本篇文章正文内容，下面案例可供参考 一、外部引用JS文件 首先创建一个xxx.js文件 写入如下代码 alert('这里写警示框弹出的内容'); 返回html界面在head或body内引用这行js代码 写入如下代码 <script src="xxx.js"></script> 即可实现弹窗效果，如下图 二、内部使用script标签样式 在html中直接使用alert 代码如下（示例）： &.
第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt
11-14
本段描述主要是关于JavaScript中的HTMLDOM对象，涵盖了第十五章的一些内容以及一些浏览器对象的结构和使用方法。其中涵盖的内容有History 对象、Location 对象、Screen 对象、Navigator 对象、Event 对象、Document ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值