easyui内的弹窗dialog不会随滚动条拖动而居中 这个怎么解决
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了easyui内的弹窗dialog不会随滚动条拖动而居中 这个怎么解决相关的知识，希望对你有一定的参考价值。
参考技术A 在使用dialog插件时，默认是屏幕居中的，但是当页面出现滚动条时，dialog并没有随着滚动条往下滚动，这时就需要用户滑动滚动条来定位dialog，这不人性化，在说出解决方案前先来普及一下jquery关于定位的几个方法复制代码 代码如下:
//获取浏览器显示区域的高度
$(window).height();
//获取浏览器显示区域的宽度
$(window).width();
//获取页面的文档高度
$(document.body).height();
//获取页面的文档宽度
$(document.body).width();
//获取滚动条到顶部的垂直高度
$(document).scrollTop();
//获取滚动条到左边的垂直宽度
$(document).scrollLeft();
ok，下面问题就很好处理了，移动dialog有现成的函数，不过dialog本身没有move函数，但是dialog是继承自panel的，panel有move函数，因此可以调用panel的move函数来移动dialog
复制代码 代码如下:
$('#dlg').dialog('open');
$("#dlg").panel("move",top:$(document).scrollTop() + ($(window).height()-250) * 0.5);
其中 $(window).height()-250，这里250px是dialog的宽度。本回答被提问者和网友采纳
VUE实现可随意拖动的弹窗组件
背景：项目需要，我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库，由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口，可能用的更多的时移动端吧吧，于是就随手写了一个，比较简单吧，但是做过的就会知道也是有一些小小的技巧，记录下吧留作备用。
由于不是很难，就不做过多解释了，直接上代码：
前端精品教程：百度网盘下载
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
<template> <el-container v-bind:id="id" v-if="dialogVisible"> <el-header> <div @mousedown="mousedown"> <h2 v-html="title"></h2> <div @click.stop="closeDialog()" style="position: absolute;top: 0px; right: 20px;"> <span> <svg class="icon" aria-hidden="false"> <use xlink:href=‘#el-icon-ext-close‘></use> </svg> </span> </div> </div> </el-header> <el-main> <slot>这里是内容</slot> </el-main> <el-footer> <span class="dialog-footer"> <el-button @click="closeDialog">取 消</el-button> <el-button type="primary" @click="closeDialog">确 定</el-button> </span> </el-footer> </el-container></template><script> export default { name: ‘Window‘, props: { titlex: String, id: [String, Number] }, data() { return { title: ‘标题‘, selectElement: ‘‘ } }, computed: { dialogVisible: { get: function () { return this.$store.state.dialogVisible }, set: function (newValue) { this.$store.commit(‘newDialogVisible‘, newValue) } } }, methods: { closeDialog(e) { this.dialogVisible = false // alert(this.dialogVisible) this.$store.commit(‘newDialogVisible‘, false) }, mousedown(event) { this.selectElement = document.getElementById(this.id) var div1 = this.selectElement this.selectElement.style.cursor = ‘move‘ this.isDowm = true var distanceX = event.clientX - this.selectElement.offsetLeft var distanceY = event.clientY - this.selectElement.offsetTop // alert(distanceX) // alert(distanceY) console.log(distanceX) console.log(distanceY) document.onmousemove = function (ev) { var oevent = ev || event div1.style.left = oevent.clientX - distanceX + ‘px‘ div1.style.top = oevent.clientY - distanceY + ‘px‘ } document.onmouseup = function () { document.onmousemove = null document.onmouseup = null div1.style.cursor = ‘default‘ } } } }</script><style scoped> .el-container { position: absolute; height: 500px; width: 500px; border: 1px; top: 20%; left: 35%; border-radius: 2px; } .dialog-footer { text-align: right; } .el-main { } .el-footer { } .el-header { color: #333; line-height: 60px; } .el-aside { color: #333; }</style> |
备注：解决了鼠标拖动过快移除窗口后终端问题
前端精品教程：百度网盘下载
以上是关于easyui内的弹窗dialog不会随滚动条拖动而居中 这个怎么解决的主要内容，如果未能解决你的问题，请参考以下文章
在使用jquery的dialog，不知道为啥每次open后，整个页面就会回到顶部(滚动条被滑至最