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>复制

标签

Modeless dialog in html

Jquery提供的load方法

jQuery总结

ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色

vue3中使用echarts的子组件接收父级传来参数，并重新渲染 watch监听的用法

uniapp项目使用echarts移动端h5tootip失效问题的解决方案（其他端没有尝试根据情况可以自己尝试）

如何在echarts生成得到地图上添加标记

【打包vue前端项目】

【前端vue3面试题】2023最新面试实录vue3.0，高频10问(持续更新...)

Cannot read properties of undefined (reading ‘styles‘)，使用webpack5搭建vue项目，vue-loader报错解决

vue实现rtsp视频流浏览器实时播放

前端哥

如何升级 Blazor Asp.net Identity 脚手架自带的 jQuery ,jQuery Validation, Unobtrusive validation 版本，去掉CDN

Jquery提供的load方法

jQuery学习笔记之jQuery常用方法(1)

echarts：去掉markLine

jquery 3D旋转banner图效果，在线学习前端开发

jQuery总结

pyecharts图例过多时导致图例和图表重叠如何解决（已解决）

vue后台的一个项目遇到的一些问题和解决办法的记录

ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色

调整echarts中图与legend的距离

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

2
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

3
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

4
移动端css布局大全

2024-02-06 15:02:421000

5
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

6
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

7
echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

8
jQuery事件处理

2024-03-12 01:03:32999

9
HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999

10
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

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

微信扫一扫：分享