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=https://www.cnblogs.com/zbspace/p/"~/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 = 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);
    }
</script>

最終顯示結果如下，日期顯示框沒有位移

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/158702.html

標籤：JavaScript

上一篇：【uuid】- 唯一標識

下一篇：JS變數+作用域