<!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. SQL Server实例间同步登录用户

    SQL Server实例间同步登录用户 问题痛点:由于AlwaysOn和数据库镜像无法同步数据库外实例对象,例如 登录用户.作业.链接服务器等,导致主库切换之后,应用连接不上数据库或者作业不存在导致每 ...

  2. Seata AT和XA模式

    一.分布式事务产生得原因: 1.1.数据库分库分表 当数据库单表一年产生的数据超过1000W,那么就要考虑分库分表,具体分库分表的原理在此不做解释,以后有空详细说,简单的说就是原来的一个数据库变成了多 ...

  3. Web3.0时代的全新合作模式：DAO

    你有没有遇到这种情况:我有一个很棒的想法,想要开发出一个"改变世界"的项目,但是我既没有技术,也没有人脉,甚至没有资金,导致我始终没有办法开始行动,痛苦万分.就比如在黑客大赛上,我 ...

  4. 基于go语言gin框架的web项目骨架

    该骨架每个组件之间可单独使用,组件之间松耦合,高内聚,组件的实现基于其他三方依赖包的封装. 目前该骨架实现了大多数的组件,比如事件,中间件,日志,配置,参数验证,命令行,定时任务等功能,目前可以满足大 ...

  5. SQL运用full join连接,decode函数,nvl函数进行列转行

    背景说明:full join连接,decode函数,nvl函数,结合生产背景理解更深刻: test_A表是现金业主某时间段的收益:test_B表是非现金业主某时间段的收益:对于业主,test_A表与t ...

  6. ansible-playbook应用

    ansible-playbook剧本: 如上使用Ad-hoc方式点对点命令执行,可以管理远程主机,如果服务器数量很多,配置信息比较多,还可以利用ansible playbook编写剧本.从而以非常简单 ...

  7. Qt 迭代器

    目录 (一) java风格迭代器 1. QListIterator类 1. 初始化 2. findNext() 3. findPrevious() 4. hasNext() 5. hasPreviou ...

  8. 22. 从零用Rust编写正反向代理，一个数据包的神奇HTTP历险记!

    wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,内网穿透,后续将实现websocket代理等,会将实现 ...

  9. Vue源码学习(十六):diff算法(三)暴力比对

    好家伙,这是diff的最后一节了   0.暴力比对的使用场景 没有可复用的节点:当新旧虚拟 DOM 的结构完全不同,或者某个节点不能被复用时,需要通过暴力比对来创建新的节点,并在真实 DOM 上进行相 ...

  10. How to write a proposal？

    Most students and beginning researchers do not fully understand what a research proposal means, nor ...