<html>
<head>
<title>悬浮窗口示例</title>
<script type="text/javascript">
window.onscroll=function(){
var div=document.getElementById("divSuspended");
div.style.top=document.body.scrollBottom;
}
window.onresize=window.onscroll;
function init(){
var df=document.createDocumentFragment();
for(var i=0;i<40;i++){
var p=document.createElement("p");
p.appendChild(document.createTextNode("Line"+i));
df.appendChild(p);
}
document.body.appendChild(df);
window.onscroll();
}
</script>
</head>
<body onload="init()">
<p>Tryscrollingthiswindow.</p>
<div id="divSuspended"
style="position:absolute;bottom:0px;right:0px;position:fixed; ">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>登记号</th>
<th>就诊医生</th>
<th>就诊时间</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>R20140721022</td>
<td>张思德</td>
<td>2014.09.11</td>
</tr>
<tr class="error">
<td>R20140709050</td>
<td>刘宝</td>
<td>2014.09.11</td>
</tr>
<tr class="warning">
<td>R20140620060</td>
<td>李美娜</td>
<td>2014.09.11</td>
</tr>
<tr class="info">
<td>R20140501027</td>
<td>张思德</td>
<td>2014.09.11</td>
</tr>
<tr class="info">
<td>R201404010007</td>
<td>张思德</td>
<td>2014.09.11</td>
</tr>
<tr class="info">
<td>R20130201047</td>
<td>张思德</td>
<td>2014.09.11</td>
</tr>
<tr class="success">
<td>R20120801020</td>
<td>张思德</td>
<td>2014.09.11</td>
</tr>
</tbody>
</table>
<div>
<nav class="pagination">
<a class="newer-posts" href="#">上一页</a>
<span class="page-number">第 1 页/共 1 页</span>
<a class="older-posts" href="#">下一页</a>
</nav>
</div>
<footer>
<div class="col-xs-12">
<div class="submit">
<p class="text-center">共7条记录</p>
</div>
</div>
</footer>
</div>
</body>
</html>
悬浮窗口
最新推荐文章于 2025-07-30 16:45:17 发布