<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>可拖拽非模态对话框</title>

    <style>

        .dialog {

            display: none;

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            background-color: #fff;

            border-radius: 8px;

            box-shadow: 0 10px 20px rgba(0, 0, 0, .3);

            z-index: 9999;

            opacity: 0.65;

        }

        .dialog-header {

            background-color: #88c3ff;

            padding: 10px;

            border-top-left-radius: 8px;

            border-top-right-radius: 8px;

            cursor: move;

        }

        .dlgtitle {

            /* font-weight: bold; */

            font-size: 16px;

            color: chartreuse;

        }

        .dialog-content {

            background-color: #c2d6ee;

            padding: 20px;

            border-bottom-left-radius: 8px;

            border-bottom-right-radius: 8px;

        }

    </style>

</head>

<body>

    <button id="openBtn">打开对话框</button>

    <div id="dialog" class="dialog close-btn">

        <div class="dialog-header">

            <span class="dlgtitle">This page say:</span>

        </div>

        <div class="dialog-content">

            <p>请选择一篇博客进行编辑</p>

        </div>

    </div>

    <script>

        var dialog = document.getElementById('dialog');

        var openBtn = document.getElementById('openBtn');

        var bodypage = document.getElementsByTagName('html');

        var closeBtn = document.querySelector('.close-btn');

        var isDragging = false;

        var mouseX, mouseY, dialogLeft, dialogTop;

        // 鼠标按下时记录鼠标位置以及对话框位置

        dialogHeaderMouseDown = function (e) {

            isDragging = true;

            mouseX = e.clientX;

            mouseY = e.clientY;

            dialogLeft = dialog.offsetLeft;

            dialogTop = dialog.offsetTop;

        }

        // 鼠标移动时移动对话框

        // document.onmousemove = function(e) {

        dialogHeaderMouseMove = function (e) {

            if (isDragging) {

                var moveX = e.clientX - mouseX;

                var moveY = e.clientY - mouseY;

                dialog.style.left = dialogLeft + moveX + 'px';

                dialog.style.top = dialogTop + moveY + 'px';

            }

        }

        // 鼠标松开时停止拖动

        // document.onmouseup = function() {

        dialogHeaderMouseup = function () {

            isDragging = false;

        }

        // 点击打开按钮显示对话框

        openBtn.onclick = function () {

            dialog.style.display = 'block';

        }

        // 点击关闭按钮或对话框外部关闭对话框

        closeBtn.onclick = function () {

            dialog.style.display = 'none';

        }

        bodypage[0].onclick = function (e) {

            if(e.target!==dialog){

                if(e.target!==openBtn){

                    dialog.style.display = 'none';

                }

            }

            console.log("body is clicked");

        }

        dialog.onclick = function (e) {

            if (e.target == dialog) {

                dialog.style.display = 'none';

            }

        }

        // 鼠标按下对话框头部，开始拖动对话框

        var header = document.querySelector('.dialog-header');

        header.addEventListener('mousedown', dialogHeaderMouseDown);

        header.addEventListener('mousemove', dialogHeaderMouseMove);

        header.addEventListener('mouseup', dialogHeaderMouseup);

    </script>

</body>

</html>

modeless dialog in html的更多相关文章

  1. 2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...

  2. MFC中对话框类(Dialog)的应用

    转载http://hi.baidu.com/jackywdx/item/feee8041d2c2e12310ee1e85 Windows应用程序通常是通过对话框接收用户输入.向用户输出信息,本节介绍应 ...

  3. wx.Dialog

    wx.Dialog A dialog box is a window with a title bar and sometimes a system menu, which can be moved ...

  4. MFC Dialog使用

    1. OnInitDialog 对话框初始化函数 在MFC主对话框OnInitDialog()中弹出对话框 BOOL CXXXDlg::OnInitDialog() { CDialogEx::OnIn ...

  5. Essential controls for web app

    AUTO-COMPLETE/AUTO-SUGGEST Auto-complete using Vaadin Offer auto-suggest or auto-complete to help yo ...

  6. Pyqt show和exec的区别

    Pyqt中 QDialog  show和exec的区别 QDialog的显示有两个函数show()和exec().他们的区别在参考文档上的解释如下: show():显示一个非模式对话框.控制权即刻返回 ...

  7. Microsoft Win32 to Microsoft .NET Framework API Map

    Microsoft Win32 to Microsoft .NET Framework API Map .NET Development (General) Technical Articles   ...

  8. arcmap Command

    The information in this document is useful if you are trying to programmatically find a built-in com ...

  9. Worker Thread

    http://www.codeproject.com/Articles/552/Using-Worker-Threads Introduction Worker threads are an eleg ...

  10. VC++模态对话框和非模态对话框

    MFC中有两种类型的对话框:模态对话框和非模态对话框.  模态对话框是指当其显示时,程序会暂停执行,直到关闭这个模态对话框后,才能继续执行程序中其他任务.非模态对话框是指当其显示时,允许转而执行程序中 ...

随机推荐

  1. Record -「Tricks」记录

    曼哈顿距离 \(\text{dist}(A,B)=|x_{A}-x_{B}|+|y_{A}-y_{B}|\) 可以拆成 \(\max\{x_{A}-x_{B}+y_{A}-y_{B},x_{A}-x_ ...

  2. Q-REG论文阅读

    Q-REG Jin, S., Barath, D., Pollefeys, M., & Armeni, I. (2023). Q-REG: End-to-End Trainable Point ...

  3. 关于Word转PDF的几种实现方案

    在.NET中,你可以使用Microsoft.Office.Interop.Word库来进行Word到PDF的转换.这是一个示例代码,但请注意这需要在你的系统上安装Microsoft Office. 在 ...

  4. 什么是 CSS？

    1.什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作.它可以同时控 ...

  5. [GXYCTF 2019]Ping Ping Ping

    题目就是ping,而且这还有一个查询窗口,就随便查询试试 ping了一下本地,发现没有什么很大的作用,给出了提示是php可以执行系统函数这就感到神奇了,就还是上网搜了搜 发现可以在查询IP后面进行拼接 ...

  6. [ABC310D] Peaceful Teams 题解

    Peaceful Teams 题目大意 将 \(n\) 个人分成 \(T\) 组,要求每组不能包含敌对的人,问有多少种分法. 思路分析 注意到 \(n,T\) 均很小,考虑爆搜. 注意到直接枚举会枚举 ...

  7. 虹科案例 | 虹科Domo商业智能，助力保险公司逃离繁杂数据池！

    金融行业的发展充满着不确定性,一个具备强大承保能力和精算专业知识的资金池,对于身处该领域的公司和个人都是十分必要的. 在全国城市联盟(NLC)的协助下成立的NCL Mutual会员制互助保险公司,为各 ...

  8. CF1190C Tokitsukaze and Duel

    搬运一下本喵的 lg 博客 qwq 详细讲一下如何判定后手能否获胜,对其他题解做个补充.(蒟蒻的我想了好久来着 此题的关键点在于可以重复上一个人的操作使局面保持不变. 考虑先手的获胜条件,由上一段可知 ...

  9. idea 连接远程 docker 并部署项目到 docker

    目录 idea 连接远程 docker 1. 安装 docker 插件 2. 登录远程服务器,修改docker配置 3. 添加云服务器防火墙规则 4. idea 配置连接 docker 部署项目到 d ...

  10. C# WebBrowser document.execCommand()解析

            //         // Summary:         //     对文档执行指定的命令.         //         // Parameters:         ...