JavaScript - Javascript Popup Variable

Hello!

I have a script that loads a popup window on any page of a website, in order to temporarily cover the page's content. This popup window is supposed to load on top of page's content, acting as a sort of page blocker. So the visitor can't see what's on the page until he clicks the popup.

The problem i'm having right now is when i put this script on a page that has iframe content. The iframe loads on top of this popup and not underneath as it's supposed to be.

Do you guys have any advise on what should i do to make this work properly when using iframes on a page?

Here is the script:

Code:

var blocker_originalHtmlOverflow;
var blocker_originalBodyOverflow;

function blocker_addLoadEvent(func)
{    
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    } 
    else 
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

blocker_addLoadEvent(blocker_init);

function blocker_init()
{    
    if(blocker_getCookie('content_unlocked')=='1')
        return;

    blocker_originalHtmlOverflow = document.getElementsByTagName('body')[0].style.overflow;
    blocker_originalBodyOverflow = document.getElementsByTagName('html')[0].style.overflow;

    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    document.getElementsByTagName('html')[0].style.overflow = 'hidden';

    function pageScroll() {

        window.scroll(0,0); // scroll to 0

        if(blocker_getCookie('content_unlocked')!='1'){

         scrolldelay = setTimeout('pageScroll()',100); // scrolls every 1 second

        }

    }

    pageScroll();


    var haze = document.createElement('div');
    haze.id = 'blocker_haze';
    haze.style.filter = 'alpha(opacity=50)';
    haze.style.opacity = .5;
    haze.style.height = '2000';
    haze.style.width = '2000%';
    haze.style.backgroundColor = '#000';
    haze.style.position = 'absolute';
    haze.style.top = '0px';    
    haze.style.left = '0px';
    haze.style.zIndex = 1000000;

    var centerPane = document.createElement('centerPane');
    centerPane.id = 'blocker_centerPane';
    centerPane.style.width = '500px';
    centerPane.style.height = '361px';
    centerPane.style.border = '5px solid #CCC';
    centerPane.style.position = 'absolute';
    centerPane.style.left = '50%';
    centerPane.style.marginLeft = '-250px';
    centerPane.style.top= '100px';
    centerPane.style.backgroundColor = '#FFF';
    centerPane.style.zIndex = 1000001;
    centerPane.style.backgroundImage = 'url(http://www.fasgasfga.com/sfasdfasdf.jpg)';
    centerPane.style.backgroundRepeat = 'no-repeat';
    centerPane.style.backgroundPosition = '20px 10px';
    centerPane.style.padding = '20px';

    var h1 = document.createElement('h1');
    h1.style.color = '#000';
    h1.style.textAlign = 'center';
    h1.style.fontSize = '36px';
    h1.style.margin = '0 0 10px 0';
    h1.style.padding = '8px 0 0 15px';
    h1.style.fontFamily = 'arial';
    h1.style.lineHeight = '36px';
    h1.innerHTML = blocker_headline;
    centerPane.appendChild(h1);

    var p1 = document.createElement('p');
    p1.innerHTML = blocker_instructionalText;
    p1.style.textAlign = 'center';
    p1.style.padding = '20px 0 20px 0';
    p1.style.margin = '0';
    p1.style.fontSize = '18px';
    p1.style.lineHeight = '18px';
    p1.style.color = '#000';
    p1.style.fontFamily = 'arial';
    centerPane.appendChild(p1);

    var ul = document.createElement('ul');
    ul.style.textAlign = 'center';
    ul.style.margin = '0 0 10px 0';
    ul.style.padding = '0';
    ul.style.listStyleType = 'none';
    for(var i = 0;i<blocker_surveryLinks.length;i++){
        var li = document.createElement('li');        
        var a = document.createElement('a');
        a.style.display = 'block';
        a.style.fontSize = '17px';
        a.style.lineHeight = '380px';
        a.style.color = 'Black';
        a.style.fontFamily = 'arial';
        a.style.textDecoration = 'underline';
        a.target = '_blank';        
        a.href = blocker_surveryLinks[i].url;
        a.innerHTML = blocker_surveryLinks[i].text;
        a.onclick = function(){
            window.setTimeout(unblockContent, 55000);
        }
        li.appendChild(a)    
        ul.appendChild(li);
    }

    centerPane.appendChild(ul);

    var p2 = document.createElement('p');
    p2.style.textAlign = 'center';
    p2.innerHTML = blocker_footerText;
    p2.style.padding = '20px 0 0 0';
    p2.style.margin = '0';
    p2.style.color = '#F50E0E';
    p2.style.fontFamily = 'arial';
    p2.style.fontSize = '15px';
    p2.style.lineHeight = '15px';
    centerPane.appendChild(p2);

    document.getElementsByTagName('body')[0].appendChild(haze);
    document.getElementsByTagName('body')[0].appendChild(centerPane);
}

function unblockContent(){
    document.getElementsByTagName('body')[0].style.overflow = blocker_originalBodyOverflow;
    document.getElementsByTagName('html')[0].style.overflow = blocker_originalHtmlOverflow;

    document.getElementById('blocker_haze').style.display = 'none';
    document.getElementById('blocker_centerPane').style.display = 'none';
    //blocker_setCookie("content_unlocked", 1, 365, '/', '');
	Set_Cookie( 'content_unlocked', 1 , 365, '/', '', '' );
}
function Set_Cookie( name, value, expires, path, domain, secure )
{
// set time, it's in milliseconds
var today = new Date();
today.setTime( today.getTime() );

/*
if the expires variable is set, make the correct
expires time, the current script below will set
it for x number of days, to make it for hours,
delete * 24, for minutes, delete * 60 * 24
*/
if ( expires )
{
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );

document.cookie = name + "=" +escape( value ) +
( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? ";path=" + path : "" ) +
( ( domain ) ? ";domain=" + domain : "" ) +
( ( secure ) ? ";secure" : "" );
}

function blocker_setCookie(c_name,value,expiredays){
    var exdate=new Date();exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function blocker_getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1){ 
            c_start=c_start + c_name.length+1; 
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            return unescape(document.cookie.substring(c_start,c_end));
        } 
    }
    return "";
}

Hello Everyone,

First of all i'd like to thank you for this wonderful forum, you people have helped me..

Now, i'm back here because i have this problem...i have a website built with drupal, www.plus-demo.info/drupal

If you see the second menu, when you hover there is a submenu which pops out...what i want for this popup menu is to display in a fixed position...it shouldn't get out of the borders of the website...there is the code which has to do with it... Please help me...

function muchomenu_display() {
if (hoverParent) {
hoverParent.addClass('hovering');
hoverBin = hoverParent.find('.muchomenu-bin');
/* display position */
//hoverBin.css('top', 'auto');
/* display position end */
animateIn(hoverBin);
}
}


function muchomenu_close(){

if (hoverParent) {
oldParentIdx = $('.muchomenu-parent').index(hoverParent);
}
for ( var i=0 ; i < megaParents.length ; i++ ) {
megaParents.eq(i).removeClass('hovering');
}
animateOut(hoverBin);
}

function checkHorizontalPosition(item) {
var parentOffset = item.parents('.muchomenu-parent').offset();
var screenWidth = $(document).width();
var itemPosition = item.position();
var padding = 30;

var p = item.width() + itemPosition.left + parentOffset.left + padding;
if (p > screenWidth) {
var newOffset = screenWidth - p;
item.css('left', newOffset + 'px');
}

}

Hi,

I have a code that opens a new window from a flash movie. The window opens fine, but the parent window goes blank and displays this on the top left of the screen:

[object] (in IE8)
[object Window] (in Firefox)

Does anyone know what I'm missing?

This is the code for the button that opens the new window:

on (release) {
getURL ("javascript:window.open('/RG_Map.pdf','RGCommunityMap','width=700,height=700');");
}

Hey Guys,
I'm trying to make a popup. Let me rephrase, not the type of popup that we all have cursed upon! But the same concept. I have a "control panel" type web application that i have developed. It is all completely dynamic. Each application has its own index.php file. My problem is, one of my applications i need has to open in a new window since its an external site. My problem is the way i have it setup dynamically in php i MUST have that inital index.php file. So what i have tried is to put in that index file just some javascript that opens a new window. Of course both IE and FF's popup blocker kick in. I need to find away around this. Does anyone have any ideas? So far i'd tried a window.open.... also tried creating a link with a target and id and then using click(); to deploy it. And i even tried creating a fake form with a target and an id and submiting it with javascript. Everything gets blocked.

Thanks in advance,
Jamie

hello everybody, here I'm asking for help again. sorry for that in advance.

anyhow, I have the following code:

Code:

<!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">
	<head>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				$(".example7").colorbox({width:"300px", height:"500px", iframe:true, open: true});
				
				
				
			});
		</script>








	</head>
	<body onload="example7();">

<a class='example7' href="tofes.html"></a>
teststestestest
	
	</body>
</html>

I want the lightbox window open only once a day for every unique visitor on my website. I understand I should use some sort of cookie implented, but I dont really understand how to.

Thanks in advance, daniel.

I currently have a popup window that works fine but while that window is up on top and I click on another link that opens another window the popup goes behind that window. How do I code to get the popup window to always stay on top no matter what window I open up with the code I have below:

Code:

<script language="javascript" type="text/javascript">
function test() 
{
setTimeout("self.focus()",3000)
}

function open_new_window() 
{
//new_window = open("","hoverwindow","width=300,height=200,left=10,top=10");
new_window = window.showModelessDialog("","hoverwindow","width=300,height=200,left=10,top=10");
new_window.focus();
// open new document 
new_window.document.open();

// Text of the new document
// Replace your " with ' or \" or your document.write statements will fail
new_window.document.write("<html><title>JavaScript New Window</title>");
new_window.document.write("<body onBlur = "test();" bgcolor=\"#FFFFFF\">");
new_window.document.write ("Week 1 Question".bold());
new_window.document.write("<table><tr><td>Is there a role of process owner in your organization? If not, how will you overcome this challenge? Why do you need process owners as a Lean Six Sigma Green Belt Project Leader?</td></tr></table>");
new_window.document.write("<br />");
new_window.document.write("</body></html>");

// close the document
new_window.document.close(); 
}

// This is the function that will close the
// new window when the mouse is moved off the link
function close_window() 
{
new_window.close();
}

</script>

Dear friends,

I am using a Javascript which perfectly worked in all relevant browsers, including IE6 and IE7. Its advantage has been to be able to specify the window-size + to decide, whether there should be scrollbars or the option to resize it. It is also fully standards-compliant.

It opens a new popup window and is triggered via the rel="popup" or rel="popup nofollow" attributes in the specified external links, e.g.:

Code:

<a href="http://www.codingforums.com/" rel="popup">CodingForums</a>
<a href="http://www.codingforums.com/" rel="popup nofollow">CodingForums</a>

The code however does not do its job in IE8. It follows the link, but does so in the old window, not a new popup window, and thus recurs to standard behavior of links.

Here is the Javascript-Code, included in the header:

Code:

    var properties = { width: 900,
                       height: 450,
                       scrollbars: 'yes',
                       resizable: 'yes' };
    function popup(){
      var link = this.getAttribute( 'href' );
      var prop_str = '';
      for( prop in properties ){
        prop_str = prop_str + prop + '=' + properties[prop] + ',';
      }
      prop_str = prop_str.substr( 0, prop_str.length - 1 );
      var newWindow = window.open( link, '_blank', prop_str );
      if( newWindow ){
        if( newWindow.focus ) newWindow.focus();
        return false;
      }
      return true;
    }
    function setupPopups(){
      var links = document.getElementsByTagName( 'a' );
      for( var i=0; i<links.length; i++ ){
        if( links[i].getAttribute( 'rel' ) &&
            (links[i].getAttribute( 'rel' ) == 'popup' ||
             links[i].getAttribute( 'rel' ) == 'popup nofollow')) 
	links[i].onclick = popup;
      }
    }
    window.onload = function(){ 
      setupPopups();
    }

Since I am not an expert, I would greatly appreciate help to make this efficent code workable in IE8.

Thanks in advance!

CodeMat

I've written a javascript class that displays a popup, but as soon as the code executes the popup vanishes.

I've stepped through the code, line by line and there's nothing that "hides" the popup, the DIV that is created by the class, just reverts back to the default configuration generated by the following function:

Code:

function generateMarkup() { //build markup
var newNode = document.createElement( 'DIV' );
newNode.id = IDs.HelpPopup;
newNode.style.visibility = 'hidden';
newNode.innerHTML = [
'<div id="popup">',
'<div id="inside">',
'</div>',
'</div>'
].join( '' );
 return newNode;
}

All the changes made to the DIVs via document.getElementById code is completely wiped out. For example:

Code:

document.getElementById("inside").innerHTML = sText;

If I stop processing just before the Class returns to the form, the generated code is exactly as I expect it to be with all the dynamic modifications.

The class is triggered by an onClick event on a BUTTON.

I've tried to put a "sleep" function in after executing the function that modifies the DIVs, but that seems to execute before the function, not after, so the popup just flickers into existence and then vanishes.

Can anyone give me any hint(s) as to how to stop this happening.

Hi,

I adjusted a javascript code which was a clickable popup to an autoloading popup. Basicly when someone visits the page I want the popup to appear. It's working fine but Firefox doesn't display the popup on page load, only when clicked. (newsletter signup) Im just starting out on JavaScript. Can anyone help?

here's the code

Code:

$(document).ready(function() {
					   
// Here we will write a function when link click under class popup				   

									
var rel = popuprel3;							
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link							
var popupid = $(this).attr('rel');


// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$(popuprel3).fadeIn();


// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();


// Now here we need to have our popup box in center of 
// webpage when its fadein. so we add 10px to height and width 
var popuptopmargin = ($(popuprel3).height() + 10) / 2;
var popupleftmargin = ($(popuprel3).width() + 10) / 2;


// Then using .css function style our popup box for center allignment
$(popuprel3).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});



// Now define one more function which is used to fadeout the 
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {


// Add markup ids of all custom popup box here 						  
$('#fade , #popuprel3').fadeOut()
return false;
});});

theres a div on index.php with an id called popuprel3

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>

Hello everyone,
I have a very strange situation here where Internet Explorer popup a new window on only one of my <a> elements.
I created multiple <a> elements that do the following:
Code:

<a href = "javascript:popup('overview1.php?pID=<?php echo $pID;?>')">
			<button  class = "button" type="button">Overview </button></a> 
			
<a href = "javascript:popup('overview1.php?aID=<?php echo $FinalID[$key];?>')" style="float:right;"> 
				<button type="button"><img src="image/Details.PNG" height="20px" width="20px"> </button></a>
				
<a href="javascript:popup('cart.php?aID=<?php echo ... ?>)</button></a>

<a href="javascript:popup('addnew.php')">
					<button class = "NavButton" type="button">Add New</button></a>

Out of the four buttons/link, only the first one is working properly (Open a new popup window)

Below is my simple javascript code to open a window.
Code:

function popup(url){
  cuteLittleWindow = window.open(url, "littleWindow", "location=no,width=1020,height=650");;
  cuteLittleWindow.focus();
}

I have no idea why ie is acting like this and all the other major browsers work just fine with my code. Please let me know what you think is the issue and I greatly appreciate your help.





Reply With Quote




01-28-2015, 11:44 PM #2
laytonsdad View Profile View Forum Posts

New Coder Join Date Jan 2015 Location USA Posts 19 Thanks 0 Thanked 1 Time in 1 Post

Are you receiving any errors in the console?





Reply With Quote

01-29-2015, 01:21 AM #3
cheukyin91 View Profile View Forum Posts

New Coder Join Date Nov 2014 Posts 17 Thanks 6 Thanked 0 Times in 0 Posts

No. I also tried to output something on the console inside the function but it doesn't write to console as well. So I think ie doesn't even call the javascript function onclick.

Please let me know what to do, thanks!





Reply With Quote

01-29-2015, 01:25 AM #4
laytonsdad View Profile View Forum Posts

New Coder Join Date Jan 2015 Location USA Posts 19 Thanks 0 Thanked 1 Time in 1 Post


Originally Posted by cheukyin91
No. I also tried to output something on the console inside the function but it doesn't write to console as well. So I think ie doesn't even call the javascript function onclick.



If the first one works this is not the case.
Are you sure that the PHP is inserting correct information?
Did you check for errors after the click has been done or just when the page is loaded?
Do you have a live version to see?





Reply With Quote

01-29-2015, 02:37 AM #5
felgall View Profile View Forum Posts Visit Homepage

Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts

Attaching JavaScript to the href attribute produces unknown results. It never triggers an event and so regular JavaScript event processing doesn't work.

In this instance the browser's popup blocker is expecting the request to open a new window to originate with a user event and so blocks the request because there is no event.


Instead of:

Code:

<a href = "javascript:popup('overview1.php?pID=<?php echo $pID;?>')">
			<button  class = "button" type="button">Overview </button></a>

use the following in the HTML

Code:

<button id="overview1" class="button" type="button">Overview</button>

and in a <script> tag attached just before the </body> tag insert the following line of code:

Code:

document.getElementsById('overview1').onclick = function() {popup('overview1.php?pID=<php echo  $pID;?>');

Repeat the change for the other buttons (you only need the one script tag wrapped around all the JavaScript).

Hello Folks,

Here is my dropdown menu:
Code:

  
<select name="peeps">

<option value="Frank Tompson">Frank Tompson</option>
<option value="Henry Wilson">Henry Wilson</option>
<option value="Bill Kent">Bill Kent</option>
<option value="Jessi McDonald"> Jessi McDonald</option>
<option value="John Hays">John Hays</option>

How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens?

Hello
I have a piece of javascrip that refreshes the page:

----------

Code:

<script type="text/javascript">
<!-- Begin


function reFresh() {
 location.reload(true)
}
/* Set the number below to the amount of delay, in milliseconds,
you want between page reloads: 1 minute = 60000 milliseconds.
2 minutes = 120000 milliseconds 5 minutes = 300000 milliseconds*/

window.setInterval("reFresh()",20000);
// End -->
</script>

--------


I am new to javascript and wanted to use an html options menu in order to be able to choose the refresh interval:
Code:

  

<SELECT NAME="refreshtime">
<OPTION VALUE="60000">1 min</option>

<OPTION VALUE="120000">2 min</option>

<OPTION VALUE="180000">3 min</option>

<OPTION VALUE="240000">4 min</option>

</SELECT>

I know that I have to pass a variable to the function. I have tried several variations but none have worked.

I have mostly received a "done with errors" warning.

Any help would be appreciated.
Thanks

Zam

Can anyone tell me of how to take or assign a javascript variable into php.

Hi,

I'm kinda hoping this is possible but haven't found any reference to it...

I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser.

Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup?

Any assistance would be appreciated. :-)