My Programming Tricks

Caveman Blogger

This is the continuation of the previous post with also the codes to freeze the mouse scroll and hide the scroll bar. This is crucial to lock on a page to avoid any scrolling events after a message box popped up to demand a better attention from the visitor. Basically the codes are just added with a the scroll-locking codes I posted earlier here. In addition to that, I included the scrollbar disabling javascript "document.body.style.overflowY = 'hidden';" code. Here are the long combined codes:

<!DOCTYPE HTML>
<html>

<style type="text/css">

#curtain {
left:0px;
top:0px;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
width: 100%;
height: 100%;

}

#message_box {
left:50%;
top:50%;
width: 200px;
height: 70px;
z-index: 1;
margin-top: -35px;
margin-left: -100px;
}

div > div#curtain { position: fixed; }
div > div#message_box { position: fixed; }

</style>

<script>

var ff = (navigator.userAgent.indexOf("Firefox") != -1);

if (ff) {
mousewheelevent = "DOMMouseScroll";
}
else {
mousewheelevent = "mousewheel";
}

function lockScroll() {
if (document.attachEvent) {
 document.attachEvent("on"+mousewheelevent, catchWheel);
}
else if (document.addEventListener) {
 document.addEventListener(mousewheelevent, catchWheel, false);
}

}

function unlockScroll() {
if (document.detachEvent) {
 document.detachEvent("on"+mousewheelevent, catchWheel);
}
else if (document.removeEventListener) {
 document.removeEventListener(mousewheelevent, catchWheel, false);
}

}

function catchWheel(e){

if (e.preventDefault) {
 e.preventDefault();
}
else {
 e.returnValue = false;
}
}

lockScroll(); // to lock scroll
unlockScroll(); // to unlock scroll

function close() {
document.body.style.overflowY = 'scroll';
document.getElementById('curtain').style.visibility = "hidden";
document.getElementById('message_box').style.visibility = "hidden";
unlockScroll();
}

function open() {
document.body.style.overflowY = 'hidden';
document.getElementById('curtain').style.visibility = "visible";
document.getElementById('message_box').style.visibility = "visible";
lockScroll();
}

lockScroll();

</script>

<body bgcolor="#aabbcc">

<div style="width:100%;height:100%;">

<div id="message_box" style="border:1px solid #333; background-color:#ddd; text-align:center; padding:10px; ">
Message Here <a href="javascript:close()">Close</a>
</div>

<div id="curtain" style="background-color:#ddd;"> </div>

</div>

<table width="95%" align=center><tr><td>
 <a href="javascript:open()">Show Message Box</a>
 line 1 line 2 line 3 line 4 line 5 line 6 line 7 line 8 line 9 line 10
 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
 line 21 line 22 line 23 line 24 line 25 line 26 line 27 line 28 line 29 line 30
 line 31 line 32 line 33 line 34 line 35 line 36 line 37 line 38 line 39 line 40
 line 41 line 42 line 43 line 44 line 45 line 46 line 47 line 48 line 49 line 50
 line 51 line 52 line 53 line 54 line 55 line 56 line 57 line 58 line 59 line 60
 line 61 line 62 line 63 line 64 line 65 line 66 line 67 line 68 line 69 line 70
</td></tr></table>

<script>document.body.style.overflowY = 'hidden';</script>
</body>

</html>

The scrollbar will reappear after the 'close' button is pressed.

Enjoy!

My Programming Tricks

Labels

Monday, November 30, 2015

Pop a Message Box in the Center with Freezing and Hiding the Scrollbar

1 comment: