Member Avatar for learnerasp

Hi All,
I need help on this. I am a new bie in javascript
When javascript alert is popped up, it doesnot allow us to focus on the window till we click on the alert ok button.
Can we do the same when I popup div alert.
I have put in the code in a function to call when div is loaded. But its not working
The code I am using is:

<div onload="blurAll();" id="exitMessage" style="position: fixed; background-color:ButtonFace; z-index: 1; display: block; top: 307px; left: 304px; 
visibility:hidden; border: 3px solid blue; width: 250px;"> 
function blurAll()
{
// alert("blur");
//window.blur();
window.focus=false; 
}

But it seems like its not working, Even the alert is also not popping up,
Thanks so much in advance
Regards

  • 2 Contributors
  • 5 Replies
  • 155 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 5 Replies

Member Avatar for essential 
var blurAll = function() {
alert("all");
var win = window.open(" ").focus();
(( win.focus() && window.opener !== null ) ? win.blur() : win );
}
window.onload = blurAll; // The body onload attribute, is deprecated, so you do this instead of assigning the onload event inside your <body> tag.

your function will only work if you have another opened window and you cannot assign onload event using <div> tag.

Member Avatar for learnerasp

Hi Essential,
Thanks so much.
But just want to ask you, where should I place your code.
I tried to put in the script tag. and When I run the program it is actually opening another window (in ur code I found out that u are using window.open('') ).
Another window should not be opened.
When the div alert is shown only then the buttons on the browser should not be clicked, just like javascript alert box does not allow us to clik on the browser until we do some action to the alert box.

Can you pls help me to place the code?

Thanks so much for your help.
Regards

Member Avatar for essential

Hi learnerasp,

That code was just an example on how to set focus and blur, don't need to use it!
I'l try to provide another example that will handle your stated issue...

Member Avatar for learnerasp

Hi Essential,
Thanks so much for your help and time.
Will be waiting for the code :)
Regards

Member Avatar for essential

Since we cannot bring focus on the div, then we will just fake it by using a simple button to handle our focus event, then apply appropriate function. The div won't leave your sight unless you click the OK button in the created (div: custom alert box).
All codes is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Page Template</title>
<meta name="author" content="DANI-USER : essential" />
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #f0f0f0;
  border : none;
  color : #696969;
  font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  vertical-align : baseline;
  width : auto; }

h2 {
  background-color : #ccc;
  border-bottom : 1px solid #708090;
  border-top : 1px solid #708090;
  font : 700 160% "Bernard MT Condensed";
  line-height : 2ex;
  margin-top : 0;
  min-height : 2ex;
  padding : .100em 0em .100em 1em;
  white-space : nowrap; }

div {
  border : none;
  margin : 0%;
  padding : 0%; }

div#main {
  margin : 0% auto;
  text-align : left;
  height : 100%;
  overflow : hidden;
  width : 98%;
   }

div.show {
  border : 2px solid;
  margin-bottom : .200em;
  padding : .300em; 
  background-color : #fff;
  font : 700 160% Verdana, Arial, sans-serif;
  position : absolute;
  width : 40%;
}
div.tube {
  border : 1px solid #ccc;
  height : 600px;
  margin : 1% auto 1% auto;
  padding : 1.200em; }

.hide { display : none; }
.show { display : block; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var div, counter;
counter = Boolean();

clearFocus = function() {
   counter = true;
   clearInterval( time );
}

blurAll = function( e ) {
   div = (( document.getElementById ) ? document.getElementById("cAlertBox") : document.all.cAlertBox );

   try {
   dX = window.pageXOffset;
   dY = window.pageYOffset;
   } catch( er ) { }

   button = (( document.getElementById ) ? document.getElementById("btn") : document.all.btn );

div.className = "show";
div.style.left = ( dX + 20 ) + "px";
div.style.top = ( dY + 20 )  + "px";
(( !counter ) ? button.focus() : div.className = "hide" );
};
window.onload = function() {
time = setInterval("blurAll()", 10 );
}
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<h2>JavaScript Live DEMO!</h2>
<div id="cAlertBox" class="hide">
<table id="test" summary="Custom Alert Box">
<tr><td>Some custom alert message!</td><td></td>
</tr>
<tr>
<td><button id="btn" name="btn" onclick="clearFocus(); (( div.className ) ? div.className = 'hide' : div.style.display = 'none' );"> OK </button></td><td></td>
</tr>
</table>
</div>
<a href="#">Test</a>
</div>
</div>
</body>
</html>

just modify the code to match your needs...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.