<!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. 【FAQ】关于获取运动健康数据的常见问题及解答

    目录 一.Health Kit健康数据采样, 原子采样数据问题 二.Health Kit查询历史数据查询数据和返回数据不一致 三.Health Kit关于获取历史数据问题 四.调用Health Kit ...

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

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

  3. Flask框架——模板、数据库ORM

    文章目录 1 模板 1 重定向 1.1 什么是重定向? 1.2 为什么要有重定向? 1.3 如何使用重定向? 1.3.1 暂时性重定向(代码实例): 1.3.2 永久性重定向(代码实例) 2 jinj ...

  4. Jmeter将响应数据的结果保存到本地的一个文件（xls和csv）

    打印excel和csv文件的区别?? 第一种:打印excel 第二种:打印csv文件 创建beanshell后置处理器  import org.json.*;import java.io.*; Str ...

  5. Dash 2.14版本开始支持动态回调注册！

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/dash-master 大家好我是费老师,就在昨晚,Dash框架发布了其2.14.0新版本,新增的功能 ...

  6. 手写商用Java虚拟机HotSpot，疯狂磨砺技术中

    在当前Java行业激烈竞争的形式下,唯有掌握技术,心中才不能慌.在多年前,我就开始苦练底层技术,但是眼看百遍也不如手过一遍,所以我打算把虚拟机的精华实现部分用手敲出来,这个过程注定不会轻松,但是心态不 ...

  7. 17. 从零开始编写一个类nginx工具, Rust中一些功能的实现

    wmproxy wmproxy将用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,后续将实现websocket代理, 内外网穿透等, 会将实现过程分享出来, 感 ...

  8. c# 光学三原色混合，颜色叠加-dong

    东的备注: 光的三原色:红.绿.蓝 红+绿=黄 红+蓝=品红 蓝+绿=青 红+绿+蓝=白 无颜色为黑 下看代码 Bitmap image1 = new Bitmap(500, 500);//红 Bit ...

  9. dicker 常用命令(简洁版)

  10. JAVA类的加载(3) ——类加载后能够有效运行

    例1: 1 package classobject; 2 3 import java.lang.reflect.Constructor; 4 import java.lang.reflect.Invo ...