请问js高手，我想做一个动态的消息提示框，但是用绝对定位的提示框会随滚动条的移动被遮挡？

JavaScript012

请问js高手，我想做一个动态的消息提示框，但是用绝对定位的提示框会随滚动条的移动被遮挡？,第1张

对于非IE6的浏览器，可以用css解决，position:fixed,bottom:0px,right:0px

这样可以将提示层固定在浏览器的右下角，但IE6不支持fixed属性，需要通过js进行修正

IE6使用position:absolute然后监听onscroll事件，当发生浏览器滚动事件时，通过js修改bottom的值

document.body.scrollTop获取垂直滚动条距页面顶部的距离(即滚动距离)，根据这个值就可以修改bottom值达到定位浏览器中不随滚动条滚动

注：IE6市场占有份额已不到20%，可考虑不兼容IE6

<!-- 为了简单，我就写一个最简单的给你看咯 -->

<body>

    <!-- 把每组input放在id不同的table里面 -->

    <table id="table1">

        <tr><td>身高：</td><td><input /></td></tr>

        <tr><td>年龄：</td><td><input /></td></tr>

        <tr><td>体重：</td><td><input /></td></tr>

        <tr>

          <td>&nbsp</td>

          <!-- 这里使用方法GoNext -->

          <input type="button" value="确认" onclick="GoNext('table1','table2')" />

        </tr>

    </table>

    <!-- 初始化的时候，展示隐藏掉 -->

    <table id="table2" style="display:none">

        <tr><td>其他：</td><td><input /></td></tr>

    </table>

</body> // 这里写一个 GoNext 方法

<script type="text/javascript"> 

    // 其中 hide 是点击按钮后要隐藏的table的id，show是要展示的table的Id 

    function GoNext(hide,show){

        // 获得 id=hide 的控件，设置样式 style 的 display 为 none

        document.getElementById(hide).style.display = "none"

        // 设置 display 为 block（展示）

        document.getElementById(show).style.display = "block"

    }

</script>

// 把上边的两段代码放到body里面，就可以看到效果啦，当然，如果你想放在同一个table里面，那也可以追问咯

首先用户登陆时，判断他有没有要弹的消息

其次，调用JS弹出消息；

建议使用jquery框架,

当然还要有html内容：<div id="tankuang_message" style="display:none">message</div>

当然这个div的样式需要你自己去美化，去定位的，并且要有弹窗的效果。

弹出时：$('#tankuang_message').show()

关闭时：$('#tankuang_message').hide()

如果你实在不想用，那是可行的，就是麻烦点，还有可能存在兼容性问题。

弹出时：document.getElementById('tankuang_message').style.display = ''

弹出时：document.getElementById('tankuang_message').style.display = 'none'