关于jq一些基本监听事件

Posted 2020-06-14

一直一来对js不太熟悉，做起东西来感觉很出力。这次做模态框，都折腾了不少时间。期间遇到的问题，记录在此。

 

背景：

bootstrap本身有模态框的调用函数，但是由于无法弄清其原理，实在不知怎么下手。查阅实践后发现：

 

<script type="text/javascript">

$("#Modalname").modal(‘show‘);

</script>

 

这么一条小代码可以实现全屏mask的效果。但是这种mask会取消滑动块，因此，模态框就得根据当前窗口位置和大小来放置，否则可能出现看不到的情况。（水平略渣，难以去拓展bootstrapjs。。。所以只能想想能够实现新办法）

 

窗口大小变化的监听

很简单的代码：

 

<script type="text/javascript">
$(function(){
    $(window).resize(function(){});
});
</script>

 

当窗口大小发生变化时，会触发function(){}函数。

 

滑动块的监听

 

<script type="text/javascript">
$(function(){
    $(window).scroll(function(){});
});
</script>

 

当滑动块位置发生变化时，触发function(){}函数。

 

其他

说到底，都是为了让模态框处于可见的位置，因此除了监听时间，更重要的是计算模态框的位置：

<script type="text/javascript">
$(function(){
    $(window).resize(function(){
        var Otop = $("body").scrollTop();             //获取竖直滑动距离    
        var width = document.body.clientWidth;  //获得窗口当前宽度
        var height = document.body.clientHeight;//获取窗口当前高度
        var Dwidth = $("#example").width();       //获取模态框宽度   
        var Dheight = $("#example").height();    //获取模态框高度    
        var left = width/2 - Dwidth/2;
        var top = height/2 - Dheight/2 + Otop;
        $("#example").css({
            "top":top,
            "left":left
        });
    });
    $(window).scroll(function(){
        $(window).resize();
    });
});
</script>

这样就可以让框在当前页面中间显示了~