JavaScript - Close Button

How to center javascript popup without css? Cant get close button working(wrong position and dosen't close popup).
Code:

<script language="javascript">
function openPopup(a, b, c){//a = url, b = width, c = height
	
	var pOverlay,
		pContent,
		pClose;
		
	pOverlay = document.createElement('div'); 
	pOverlay.className = 'popupOverlay';
	pContent = document.createElement('div'); 
	pContent.className = 'popupContent';
	pClose = document.createElement('div'); 
	pClose.className = 'popupClose';
	document.body.appendChild(pOverlay);
	document.body.appendChild(pContent);
	
	var myRequest = new ajaxRequest();
	
	myRequest.open('GET', a, true);
	myRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	myRequest.send(null);
	
	myRequest.onreadystatechange = function(){
		
		if(myRequest.readyState == 4 && myRequest.status == 200){
			pContent.innerHTML = myRequest.responseText;
		}

	}
	
}
</script>

Code:

<style type="text/css">
.popupOverlay {
	background: #000000;
	opacity: 0.8;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	z-index: 1001;
}
.popupContent {
	background: #333333;
	border: 2px solid #DDDDDD;
	box-shadow: 0px 0px 20px #999999;
	border-radius: 3px;
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 5px;
	z-index: 1002;
	overflow: auto;
	word-wrap: break-word;
	color: #FFFFFF;
	/*height: 300px; width: 500px;*/
}
.popupClose {
	background: url('images/closePopup.png') no-repeat;
	width: 32px; 
	height: 32px; 
	cursor: pointer;
}
</style>

Hi ,

Kindly help

I have to handle the browser RED X close button in the window.

The problem is that its not saving the data.
before submitting/saving the data it executes the window.close()
I put settime out and form on submit conditionalyy put
even its not saving the data
But window is closing.
how can we sequentiate the save + window.close()

im copying the code below.
============
window.onbeforeunload = function()
{
if (window.event.clientY < 0 && (window.event.clientX > (document.documentElement.clientWidth - 5) || window.event.clientX < 15))
{
editedCheck();
document.BuildRequestForm.buttonClicked.value="REDX";
if( document.BuildRequestForm.measdatachanged.value=="false")
{
setVarZero();
fn_Close();
}
else
{
if(confirm('Do you want to save the changes?'))
{
elmtForm.onsubmit = fn_Close;
//document.BuildRequestForm.onsubmit=fn_Close;
//setVarZero()
saveMeasurement(); setTimeout('setVarZero()',1000);
//window.setTimeout(function() { window.close();}, 1000);
//window.setTimeout(function() { fn_Close();}, 1000);
//fn_Close();
//return true;
}
else
{ return "If you want to close the window click - Leave Page";}

}

}

}

=============
browser close RED X button+ popup OK Cancel "save or not" +OK

Hi! I'm new to this, so please bare with me. My terminology may not be up to par.

Here's the deal:

- I have a button on my Flash site that opens an HTML page in a popup window. In Flash, I open the new window using Actiosnscript 2.0:
Code:

on (release) {
	getURL("example1.html", "_blank");
}

- Within the popup window are links to other HTML pages. They all open in the same window. I've been using the following to create the links in Dreamweaver:
Code:

onClick="MM_goToURL('parent','example2.html')"

- On each page, I have a "Return to Main Menu" button that should close the popup window. To do this, I have been using:
Code:

onClick="window.close()"

- The problem is that it works differently in each browser, and I can't even get it to consistently close the window in most browsers:
Internet Explorer = popup message appears, asking "Are you sure you want to close this window?" or something similar; window closes after clicking "Yes."
Safari = Only closes if I'm on the original HTML page. If I click on any of the other links (note that these all open in the same window), those pages' "Return to Main Menu" buttons cease to work. However, if I keep clicking "Back" until I get to the original page, it closes.
Opera = Button actually works for each page.
Firefox & Chrome = Does not close the window at all.

I looked into it and saw that others have used a window.opener to solve similar issues. But, since my popup window is opened using Flash/AS2, I need to find a way around it. I've tried preceding "window.close()" with "window.opener=null" (i.e. - onClick="window.opener=null; window.close()"), but I don't think I'm doing it right because it still doesn't work.

I've also seen others use codes that involve functions and variables, but it is beyond my current coding knowledge to implement this. Like I said, I'm sort of new at this.

Any advice would be greatly appreciated. Thank you.

- PW

ok, so i got some help on here to modify some java that resides in a server-side program that is limited in scope of modification, but i was able to find the code that i need to modify to perform the behavior i need.

the code below works great at making sure the user entry data is formatted correctly, but fails on 2 critical points:

1) it allows a blank entry (needs to give similar error message as when formatted incorrectly - see code)

2) it allows any formatting if a combination of alpha and numeric characters are used (needs to give error message if ANY alpha characters are used).

THANKS so much in advance.


Code:

if( ! Form1.elements['EIF2'].disabled )

	var n=Form1.elements['EIF2'].value.match(/\d/g).join('');
	Form1.elements['EIF2'].value= 
	[n.substring(0,4),n.substring(4,9),n.substring(9)].join('-');

	{

	var re = /^\d{4}\-?\d{5}\-?\d{6}$/
if ( ! re.test( Form1.elements['EIF2'].value ) )
	{
	
	alert( 'Lawson # must be 15 digits\r(Example: 1234-12345-123456)' );
		return false;
    }

}

how to close a tab in html or javascript

I am trying to execute a simple window.close function to be used in IE8 and IE9, and window.close() doesn't seem to be working. Are there any known fixes?

I have this script to close a div when I click outside of it. It works in Firefox but in IE7 i get an error: 'divid' is undefined.
mydiv is the div I want to close and clickclick is the link that makes the div appear.

Code:

<script type="text/javascript">

      function monitorClick(e){
        var evt = (e)?e:event;
       
        var theElem = (evt.srcElement)?evt.srcElement:evt.target;

        while(theElem!=null){
          if(theElem.id == "mydiv" || theElem.id == "clickclick" && document.getElementById(divid).style.display == 'none') {
          document.getElementById('mydiv').style.display = 'block';
          return true;
          }
	 
          theElem = theElem.offsetParent;         
        }
        document.getElementById('mydiv').style.display = 'none';
        return true;
      }

      document.onclick = monitorClick; 
 </script>

What should I change to make it work in IE7?

Hi! I have a problem with the function close();

The window does open but then it immediately closes by itself. I didn't even get to see the content and of course I didn't even click on the button "close the window!"

I want to be able to see the content of the page and when I click on the button, it will close the window. Thank you in advance for your help!

Code:

var window;
function newWindow(){
    window=window.open("", "Results", "width=400, height=250");
    window.document.write("<body><table>");
    window.document.write("<h1 style='border-bottom-style: dotted; border-bottom-width: 1px;font: italic 16pt Times New Roman, sans-serif; color: navy;'>Survey's Results</h1>");
    for(var i=0; i<tabVotes.length; i++){
       	window.document.writeln("<tr>");
       	window.document.writeln("<td style='text-align: center'>" + tabPeople[i] + "</td>");
        window.document.writeln("<td style='text-align: center'>" + tabVotes[i] + " votes </td>");
       	window.document.writeln("</tr>");	
    }
    window.document.writeln("</table>");
     window.document.writeln("<input name='Close' type='button' value='Close the window' />");
    window.document.getElementById('Close').onclick = window.close(); 
    window.document.writeln("<br /><br />Thank you!");
    window.document.writeln("</body>");
}

I have a page with categories of images. When clicked, each image on the left opens a div with it's own gallery of thumbnails.

http://myspringslandscaping.com/portfolio.html

Right now, to close a div, the category image has to be clicked a second time. How can I set it so that when one div opens, the other closes automatically? The client wants only one category displayed at a time.

Any help would be appreciated.
Thanks!
Marita

I am having a heck of a time closing this popup window when i logoff the site.

i open it by

Code:

shoutwindow = window.open("<?=$MY_LINK_ROOT?>/shoutbox/minichat.php", "shoutwindow", "location=0,status=0,scrollbars=0,menubar=0,resizable=0  width=300,height=310");

when i click logoff the site i want the popup to close also

here is the logoff php

Code:

session_start();

         //only for testing will remove this

    if(!shoutwindow.closed)  

      {  

         echo "window open";
               self.close(); 

           
           //shoutwindow.close ();  // also tried both these didnt work
           //  window.close();

      }  

      else  

      {  

         echo "Window already closed";           

      }  

 


mysql_close($link);
unset($_SESSION['Sess_UserId']);

// Unset all of the session variables.

session_unset();

// Finally, destroy the session.

session_destroy();

echo "<script> location.href='$MY_LINK_ROOT'</script>";

exit;

?>

what am i missing here lol ? thanks

UPDATE: i just had an idea, can i mix a href and an onClick together so that both are executed like this (i never tried it before)

Code:

the reason i use self.close is because i heard that it always closes the child not the parent.

<a href="logoff.php" onClick="self.close()" return:true;>Log Off</a>

the return true will make it execute the href as well right?

Within my Flex application I write stuff to the browser via a javascript document write. Is there a command to send to indicate I want to close that stream?

When I send the command the rotating indicator keeps running indicating the browser is still expecting some stuff. If I click the stop button on the browser it stops spinning and the stuff I sent (an xml stream) becomes available. As this is an automated process, there is no person to hit the stop button.

this is quite embarrasing as i've done it before, but oh well...

trying to close a window that is opened with a built-in dreamweaver function called MM_openBrWindow(). trying to use this code: PHP Code:
if ($OutsideVisitors == "false") {
  echo '<center><strong><em><font size="4">THERE HAVE BEEN NO VISITORS TO THE WEBSITE TODAY...
  </font></em></strong><br><br><input name="closeme" type="button" id="closeme" 
  value="Close Window" onclick="Window.Close()"; /></center>';
                                 } 


i have also tried: PHP Code:
onclick=javascript:Window.Close() 


it's just not behaving for me. any hints anyone? thanks a bunch!

(the BrWindow() function in DW does open a popup window, so I think the js close() should work. if i remember right, a popup window is a prereq for that function to even work...)

Hi everyone,

I was trying to add a text popup box on my page, and this code helped me but I need to add a close icon (which is an image in my code)..

but it doesn't work! :/

here is my code:
Code:

function show_hide_box(an, width, height, borderStyle) {

    if (navigator.userAgent.indexOf("MSIE") != -1) {
        var browserIsIE = true;
    } else { browserIsIE = false; }


  var href = an.href;
  var boxdiv = document.getElementById(href);

  if (boxdiv != null) {
    if (boxdiv.style.display=='none') {
      move_box(an, boxdiv);
      boxdiv.style.display='block';
    } else
      boxdiv.style.display='none';
    return false;
  }

  boxdiv = document.createElement('div');
  boxdiv.setAttribute('id', href);
  boxdiv.style.display = 'block';
  boxdiv.style.position = 'absolute';
  boxdiv.style.width = width + 'px';
  boxdiv.style.height = height + 'px';
  boxdiv.style.border = borderStyle;
  boxdiv.style.backgroundColor = '#FFF';

  var inClosebox = document.createElement("div");
  inClosebox.setAttribute('id', 'Close');
  inClosebox.style.position = 'absolute';

  if (browserIsIE) {
      inClosebox.style.left = '-1px';
      inClosebox.style.top = '0px';
  } else {
      inClosebox.style.left = '-15px';
      inClosebox.style.top = '-15px';
  }

  inClosebox.style.visibility = 'hidden';
 
  var inImage2 = document.createElement("img");
  inImage2.onclick = function () { this.document.close(); };
  inImage2.setAttribute('src', '../../Images/closebox.png');
  inImage2.setAttribute('width', '30');
  inImage2.setAttribute('height', '30');
  inImage2.setAttribute('border', '0');
  inImage2.style.cursor = 'pointer';
  inClosebox.appendChild(inImage2);


  var contents = document.createElement('iframe');
  contents.scrolling = 'yes';
  contents.frameBorder = '0';
  contents.style.width = width + 'px';
  contents.style.height = height + 'px';
  contents.src = href;

  boxdiv.appendChild(contents);
  boxdiv.appendChild(inClosebox);
  document.body.appendChild(boxdiv);
  move_box(an, boxdiv);

  return false;
}

can any help me please?

I have a div with an icon and some text. When the user hovers over the area, a box appears above it with a few links in the box.

I want the user to be able to select any of these links, as well as have the option NOT to select these links and have the box disappear when he moves off of the box.

I can't seem to achieve this with the script I'm using now - right now, as soon as the user moves off of the div/icon and moves the cursor UP to select the links in the box, the box disappears.


Any ideas?

Here's my JS code:

Code:

<script language="JavaScript">
function show_it(){
document.all.box1.style.visibility = "visible";
}
	
function hide_it(){
document.all.box1.style.visibility = "collapse";
}
</script>

Here's my CSS code:

Code:

#box1{
position: absolute;
top: -186px;
left: 147px;
visibility: hidden;
}

#socialmedia-action-items-container {position: relative; float: right;}

#box-wrapper {padding: 0 0 21px 0; height: auto; width: 160px; background: url(../images/socialmedia/sm-funnel.png) 10px bottom no-repeat; float: left;}

#box-main {padding: 10px 10px 0 10px; height: auto; width: 140px; background-color: #cc0000; float: left;}

a.box-item1 { /*flickr*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/flickr.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item1:hover {
	color: #000;
	background: url(../images/socialmedia/flickr-over.png) top left no-repeat;}
	
a.box-item1 span {font-size: 0.7em;}
	
a.box-item2 { /*facebook*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/facebook.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item2:hover {
	color: #000;
	background: url(../images/socialmedia/facebook-over.png) top left no-repeat;}
	
a.box-item2 span {font-size: 0.7em;}

a.box-item3 { /*twitter*/
	padding: 5px 0 10px 45px;
	height: 36px;
	width: 100%;
	color: #fff;
	background: url(../images/socialmedia/twitter.png) top left no-repeat;
	float: left;
	font-size: 1.3em;
	line-height: 0.8em;}
a.box-item3:hover {
	color: #000;
	background: url(../images/socialmedia/twitter-over.png) top left no-repeat;}
	
a.box-item3 span {font-size: 0.7em;}

Here's my HTML code:

Code:

<div id="socialmedia-action-items-container">

<a class="twitter" onMouseOver="show_it()" onMouseOut="hide_it()">
                <span class="twitter-first">Follow Us on</span><br />
                <span class="twitter-last">Twitter</span>
</a>
            
            <div id="box1">
                <div id="box-wrapper">
                    <div id="box-main">
                        <a href="#" class="box-item1">Follow us <br /><span>on Flickr</span></a>
                        <a href="#" class="box-item2">Follow us <br /><span>on Facebook</span></a>
                        <a href="#" class="box-item3">Follow us <br /><span>on Twitter</span></a>                    </div>
                </div>
            </div>

</div>

Much appreciated!

I've been trying to write a script that activates a confirm box when a browser window is closed. I want this to occur only when they try to close the window, not if they click on links on the page to navigate elsewhere.
The confirm box then gives the option to continue closing as they intended or, if they click on ok (or cancel if it's easier), navigate to another page I specify.
The script below works but it displays a confirm box when you close the window and click on links.

Code:

<script type="text/javascript">
function show_confirm()
{
var r=confirm("Wait! Would you like check out yahoo?");
if (r==true)
  {
  window.open("http://www.yahoo.com");
  }
else
  {
  window.close();
  }
}
window.onbeforeunload = show_confirm;
</script>

I understand you may be able to create a variable that you then attach to any links on the page you don't want to activate the confirm box. I don't know how to do this.
Thank you.