my97日期控件弹出位置显示异常
使用my97日期选择控件的时候,如果整个页面是有滚动条的,根据触发显示日期的控件的父控件的position不同会显示不同的情况
1、position不为fixed则滑动滚动条,显示的日期层不会出现异常位移,如下图
滚动条不动,正常显示

滚动条没去,正常显示

2、position为fixed则滑动滚动税票,显示的日期层会根据滚动条的移动而移动,如下图
滚动条不动,正常显示

滚动条滑动,异常位移

对于第二种情况解决方法如下:
写一个方法 如下:
function showDate() {
$('iframe[hidefocus]').parent().hide();//用于强制重新计算坐标值
new WdatePicker();
var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);//滚动条的偏移值
var oldTop = $('iframe[hidefocus]').parent().css('top').replace('px', '');//日期控件最终计算的top值
var newTop = oldTop - scrollTop//日期控件的top值减去滚动条的偏移值就是当前日期控件的位置
var iCount = 0;
//下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
var intHandle = setInterval(function () {
var top = $('iframe[hidefocus]').parent().css('top').replace('px', '');
iCount++;
if (iCount < 10) {
$('iframe[hidefocus]').parent().css({
'position': 'fixed',
'top': newTop
});
}
else {
clearInterval(intHandle);
}
}, 100);
}
触发的控件的onclick事件直接调用 此方法,完成页面html和调用代码如下
<h2>Index</h2> <div style="height: 1000px; background-color: yellow">
</div>
<div style="position: absolute; top: 50%; left:50%; background-color: blue;">
<input type="text" class="form-control" onclick="showDate();"/>
</div>
<script src="~/Scripts/plugin/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
function showDate() {
$('iframe[hidefocus]').parent().hide();//用于强制重新计算坐标值
new WdatePicker();
var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);//滚动条的偏移值
var oldTop = $('iframe[hidefocus]').parent().css('top').replace('px', '');//日期控件最终计算的top值
var newTop = oldTop - scrollTop//日期控件的top值减去滚动条的偏移值就是当前日期控件的位置
var iCount = ;
//下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
var intHandle = setInterval(function () {
var top = $('iframe[hidefocus]').parent().css('top').replace('px', '');
iCount++;
if (iCount < ) {
$('iframe[hidefocus]').parent().css({
'position': 'fixed',
'top': newTop
});
}
else {
clearInterval(intHandle);
}
}, );
}
</script>
最终显示结果如下,日期显示框没有位移

my97日期控件弹出位置显示异常的更多相关文章
- 根据条件决定My97DatePicker日期控件弹出的日期格式
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- 关于JSON日期格式显示及My97日期控件
1.My97日期控件.显示不同的日期格式,可以调整"dateFmt“的参数来配置: 详细DEMO:http://www.my97.net/demo/index.htm <p>日期 ...
- my97日期控件
http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...
- 怎样使用My97日期控件
有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...
- js ui框架 My97日期控件 富文本编辑器
My97日期控件 http://www.my97.net/dp/index.asp 富文本编辑器 http://www.kindsoft.net/demo.php 百度的magic也不错 http:/ ...
- mui popover 自定义 弹出位置 显示 隐藏
mui popover 一.要显示.隐藏弹出菜单插件,mui推荐使用锚点方式. 1.页面顶部导航栏.底部工具栏固定位置 <header class="mui-bar mui-bar-n ...
- JQuery EasyUI 日期控件 怎样做到只显示年月,而不显示日
标题问题的答案在OSChina中 http://www.oschina.net/question/2282354_224401?fromerr=lHJTcN89 我还是把这个记录下来 ======== ...
- My97日期控件 选择日期区间
<script language="javascript" type="text/javascript" src="My97DatePicker ...
- my97 日期控件
官网:http://www.my97.net/ 好多广告啊! 文档地址: http://www.mysuc.com/test/My97DatePicker/
随机推荐
- PHP目录操作(附封装好的目录操作函数文件)
目录函数库常用API $path='test'; var_dump(is_dir($path));//检测是否为目录 echo '<hr/>'; echo getcwd();//得到当前的 ...
- Python-Django学习笔记(三)-Model模型的编写以及Oracle数据库的配置
Django使用的 MTV 设计模式(Models.Templates.Views) 因此本节将围绕这三部分并按照这个顺序来创建第一个页面 模型层models.py 模型是数据唯一而且准确的信息来源. ...
- Python之路Day11
函数名的第一类对象及使用 当作值,赋值给变量 def func(): print(1) print(func) #查看函数的内存地址 a=func print(a) a() 可以当作容器中的元素 de ...
- 关于Oracle内存分配-解决实际运行时最大Session数不一致远小于系统配置最大的Session数目
一.相关的技术准备 1. 关于内存的介绍:https://blog.csdn.net/u013641333/article/details/82732526 2. PGA_AGGREGATE_TARG ...
- 363. 矩形区域不超过 K 的最大数值和(利用前缀和转化为最大子序和问题)
题目: 链接:https://leetcode-cn.com/problems/max-sum-of-rectangle-no-larger-than-k/ 给定一个非空二维矩阵 matrix 和一个 ...
- ++i、i++、+=、-=的区别
要分清这个区别,先要掌握赋值的顺序,赋值语句是从右往左执行的, 计算的顺序从左至右. 那么++i第一步是把自身i+1后才赋值给自身,即先加后赋值. i++第一步是先把自身赋值给自身,即先赋值后再加减. ...
- day04_1hibernate
log4j的整合.一对一关系的操作.二级缓存的介绍 一.log4j的整合: 1.介绍什么是 slf4j 核心jar : slf4j-api-1.6.1.jar .slf4j是日志框架,将其他优秀的日 ...
- [SDOI2014] 重建 - 矩阵树定理,概率期望
#include <bits/stdc++.h> #define eps 1e-6 using namespace std; const int N = 55; namespace mat ...
- MATLAB一些常用的function
在MATLAB中一些常用的算数符号与我们平时所用的不同,比如:根号,平方,e,以及对数函数等. (1)平方:a^2 意思为a的平方,亦可以写成a*a: (2)根号:sqrt(x)意思为对x开根号,x既 ...
- 番外:如何克隆可刷新的PDB(Refreshable PDB)
基于版本:19c (12.2.0.3) AskScuti 创建方法:克隆创建 对应路径:属于克隆.PDB类型为:Refreshable 相关系列请参考<Oracle创建PDB列表文章> 注 ...