Modeless dialog in html

这篇具有很好参考价值的文章主要介绍了Modeless dialog in html。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<!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>

文章来源地址https://www.toymoban.com/news/detail-790618.html

到了这里,关于Modeless dialog in html的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web前端开发:HTML、CSS

    在介绍Web网站工作流程的时候提到, 前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序 ,如下图所示: 1.   网页有哪些部分组成 ? 文字、图片、音频、视频、超链接、表格等等。 2.  我们看到的网页,背后的本质是什么 ? 程序员写的前端

    2023年04月18日
    浏览(37)
  • Web 前端—HTML+CSS系列

    (1)知识点 :是制作网页的编程语言 浏览器把代码解析后的样子就是我们看到的网站 一个网站是由很多个网页组成的 查看网页代码源 (2).html网页制作 新建一个文件夹——新建记事本——把记事本格式改成demo.html模式——打开方式(打开记事本)——输入要输入的内容—

    2024年02月04日
    浏览(54)
  • 前端基础:HTML和CSS简介

    目录 1、HTML 简介 (1)在 HTML 中引入外部 CSS (2)在 HTML 中引入外部 JavaScript 2、CSS 简介 (1)CSS 的基本语法 (2)三种使用 CSS 的方法 2.1 - 外部 CSS 的使用 2.2 - 内部 CSS 的使用 2.3 - 行内 CSS 的使用         HTML 指的是超文本标记语言 ( H yper  T ext  M arkup  L anguage), 标记语

    2024年02月16日
    浏览(40)
  • 前端全集Ⅰ---- HTML/CSS/JavaScript

    Web:全球广域网,也称万维网,能够通过浏览器访问的网站 Web网站的工作流程:(前后端分离模式) 网页有哪些组成? 文字、图片、视频、音频、超链接 前端代码通过浏览器的解析和渲染变成用户看到的页面,对网页进行解析渲染的部分就是浏览器的内核 Web标准 不同的浏

    2024年02月15日
    浏览(72)
  • HTML和CSS的基础-前端扫盲

    想要写出一个网页,就需要学习前端开发(写网页代码)和后端开发(服务器代码)。 对于前端的要求,我们不需要了解很深,仅仅需要做到扫盲的程度就可以了。 写前端,主要用到的有: HTML  CSS  JS 前端开发,主要使用的开发环境主要有两个: 1.JetBrains系列 如IDEA专业版

    2024年02月05日
    浏览(47)
  • HTML+CSS前端 简易用户登录界面

    Day1 刚学了一些html和css的简单语法,尝试写一个非常简易的静态用户登录界面。   login_simple.html login_simple.css 这里需要把 background.jpg 替换成自己的背景图。 效果展示 最后的效果就是这样的啦

    2024年02月14日
    浏览(46)
  • 蓝旭前端预习1——HTML+CSS

    目录 HTML HTML:超文本标记语言 HTML基本骨架 标签的关系 常见标签及其属性 注释标签 标题 段落 换行 水平线 文本格式化 图像 超链接 多媒体:音频+视频 div、span标签:划分网页区域,摆放内容 字体实体:在网页中显示预留字符 列表 有序列表 无序列表 定义列表 表格 表单:

    2024年04月15日
    浏览(43)
  • 前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(54)
  • 截图转HTML代码,支持预览,前端不用浪费时间写html和css了

    试用地址:https://picoapps.xyz/free-tools/screenshot-to-code 这个简单的应用可以将截图转换为HTML/Tailwind CSS代码。它使用GPT-4 Vision来生成代码,并使用DALL-E 3来生成类似的图像。现在你也可以输入一个URL来克隆一个现有的网站! NYTimes Original Replica Instagram页面(没有泰勒·斯威夫特的照

    2024年02月04日
    浏览(49)
  • 前端基础面试题(HTML,CSS,JS)

    前后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库  web前端面试题库 VS java后端面试题库大全 代码结构:  使页面在没有css的情况下,也能够呈现出好的内容结构 有利于SEO:  爬虫根据标签来分配的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓

    2024年02月09日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包