右下ポップアップウィンドウ
3536 ワード
javascriptコード:
<script type="text/javascript">
var div1;
function scall(){
div1.style.top=getScrollTop() + getClientHeight() - div1.offsetHeight + "px";
}
function showMessage(){
div1 = document.getElementById("div");
div1.style.left =getClientWidth() + getScrollLeft() -div1.offsetWidth + "px";
div1.style.display="block";
scall();
}
function closeMessage(){
div1.style.display="none";
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
/*ClientHeight*/
function getClientHeight() {
return clientHeight = window.document.documentElement.clientHeight;
}
/*ClientWidth*/
function getClientWidth() {
return window.document.documentElement.clientWidth;
}
/*ScrollTop*/
function getScrollTop() {
var scrollPos = 0;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof window.document.compatMode != 'undefined' &&
window.document.compatMode != 'BackCompat') {
scrollPos = window.document.documentElement.scrollTop;
}
else if (typeof window.document.body != 'undefined') {
scrollPos = window.document.body.scrollTop;
}
return scrollPos;
}
/*end ScrollTop*/
/*ScrollLeft*/
function getScrollLeft(){
var scrollPos =0;
if (typeof window.pageXOffset != 'undefined') {
scrollPos = window.pageXOffset;
}
else if (typeof window.document.compatMode != 'undefined' &&
window.document.compatMode != 'BackCompat') {
scrollPos = window.document.documentElement.scrollLeft;
}
else if (typeof window.document.body != 'undefined') {
scrollPos = window.document.body.scrollLeft;
}
return scrollPos;
}
/*end ScrollLeft*/
</script>
html :
<div id="div" style="height: 150px;width: 180px;position: absolute;display: block; border-style: solid; border-width: 1px; background-color: #ffffff;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td height="15px" style="background-color: #d0d7ec;text-align: right; color:white; padding-right: 5px;" >
<p onclick="closeMessage()" style="cursor: pointer; display: block;width:30px;"> </p>
</td>
</tr>
<tr>
<td height="30px" style="text-align: left;vertical-align: top; padding-top: 10px;" >
<p> <font color="red"> 2 :</font><br/><br/>
<a href="#">1、 。</a><br/>
<a href="#">2、 “ ” 。</a>
</td>
</tr>
</table>
</div>