标签：
一直一来对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>
这样就可以让框在当前页面中间显示了~
标签：
原文地址：http://www.cnblogs.com/onyourway/p/5201173.html
