how to create a pop-up in php forum

**Beverleyh** · 02-20-2014, 06:00 PM

I'm not sure why you're posting the markup for a standalone web page. Where does a standalone page fit in to the equation?

According to the Sticky Note instructions, you have styles and javascripts to paste in to the HEAD section of the web document, and you also have the sticky div markup to paste in to the BODY section of the web document.

In a phpbb3 forum, both the HEAD and opening BODY tags appear in the "overall_header.html" file, so you only need to modify this one file, pasting the Sticky Note component parts where instructed.

The markup in the BODY for the sticky div can be put in to the previous code sample, which will make it visible on the index page only;

Code:

<!-- PHP -->
$page = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get web page and strip extension
if ($page == 'index') { 
<!-- ENDPHP -->

<div id="stickynote1" class="stickynote">
<img src="http://i52.tinypic.com/2usu1ad.gif" align="left" />Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

<div align="right">
<a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
</div>

<!-- PHP --> 
}
<!-- ENDPHP -->

You don't need to edit "forumlist_body.html" in this case (this is just a fragment of template markup - an incomplete web document, that is called in to play when the phpbb3 forum index is viewed) and you don't need to create a new/standalone web page.

Feel free to post the modified "overall_header.html" file once you've put your sticky code/markup into it, but you'll also need to post a link to your forum so we can troubleshoot a live installation of the script.

**itprosam** · 02-27-2014, 02:42 AM

Hi Beverly,
sorry for late reply, I was sick.
I made changes to overall_header but now it pops up on all pages. I wanted it to only pop-up once on Index.php page so user's do not get annoyed.
that pop-up will basically ask for donations or if any specific news. I want user's to return to my forums rather then leave by getting annoyed with that pop-up.
Below is the whole code for overall_header:

Head portion of overall_header file

Code:

<style type="text/css">

.stickynote{
position:absolute;
visibility:hidden;
width: 300px;
height: 100px;
border: 2px solid black;
background-color: grey;
padding: 4px;
box-shadow: 3px 3px 8px #818181;
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script src="stickynote.js">

/***********************************************
* Sticky Note Script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

var mysticky=new stickynote({
	content:{divid:'stickynote1', source:'inline'},
	showfrequency:'always',
	hidebox:8
})

</script>
</head>

Body of overall_header file

Code:

<div id="stickynote1" class="stickynote" align="center">
<b><big><br><br>Please Support us by your donations.</big></b>

<div align="center">
<a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
</div>

</div>

**itprosam** · 02-27-2014, 02:44 AM

I already posted your reply but problem below:
... why does it needs moderator review each time I post using advanced editor? it takes a long time to get it approved and posted. Will I ever be able to post directly without any intrusion?

**Beverleyh** · 02-27-2014, 06:16 AM

I made changes to overall_header but now it pops up on all pages. I wanted it to only pop-up once on Index.php page so user's do not get annoyed.

Yes, as previously stated...

The markup in the BODY for the sticky div can be put in to the previous code sample, which will make it visible on the index page only;

Code:

<!-- PHP -->
$page = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get web page and strip extension
if ($page == 'index') { 
<!-- ENDPHP -->

<div id="stickynote1" class="stickynote">
<img src="http://i52.tinypic.com/2usu1ad.gif" align="left" />Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

<div align="right">
<a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
</div>

<!-- PHP --> 
}
<!-- ENDPHP -->

I'm not sure what the exact criteria is for new members and moderated posts. It won't happen forever though - presumably once you have hit a minimum post count or length of registration, your posts will go through without a hitch.

**itprosam** · 02-27-2014, 07:12 AM

hmm I tried that but now it's giving me error messages :S
I kept the Head portion of the coding as is but followed your instructions to make changes at the very bottom of overall_header file and added that snippet as above mentioned. Please see the code for the whole overall_header file and check the error on the website then please advise

my header file is way too big. I have uploaded it. Please download it and check:
http://www.firedrive.com/file/0CA31289494A0A20

I reverted back to old code for now as I am working on the forum. Please check the above file and advise.

**Deadweight** · 02-27-2014, 07:04 PM

Hey if you still would like a window pop up here is something i created. It's simple and quick:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game Selection</title>
<style>
* { margin:0 auto; padding:0;}
body { background-color:#CCCCCC;}

#play { width:200px; border:1px solid black; text-align:center; margin-top:5px; cursor:pointer; background:white;}
#play:hover { text-decoration:underline;}

#bce_popup {
	position:absolute;
	top:0;
	left:0;
	background-color:black;
	background-color: rgba(0,0,0,0.85);
	width:100%;
	height:100%;
	display:none;
}

#bce_main {
	top:10px;
	height: 80%;
	width:80%;
	margin-top:10px;
	clear:both;
	position:absolute;
	display:none;
	background-color:transparent;
	border:1px solid black;
	background-color:white;
	margin-left:10%;
}
</style>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
	
	$(document).on('click','#play',function(){
		create_popup();
	})
	
	
	$(document).on('click','#bce_popup',function(){
		close_pop()
	})
	
})
function create_popup(){
	$('body').append('<div id="bce_popup"></div><div id="bce_main"></div>');
	$('#bce_popup').fadeIn(400);
	$('#bce_main').fadeIn(400);
}
function close_pop(){
	$('#bce_popup').fadeOut(400)
	$('#bce_main').fadeOut(400)
	delay(400)
	$('#bce_popup').remove()
	$('#bce_main').remove()
}
</script>
</head>
<body>

<div id="play">Display</div>

</body>
</html>

Place anything between

Code:

<div id="bce_main"></div>

to display. Also to hide just click the grey area. Let me know if this works for you.

**itprosam** · 03-03-2014, 03:17 AM

"Crazykld69" it worked but I want the pop-up to be displayed automatically rather the OnClick feature ... and "Beverleyh" did you got a chance to look at the coding??

**Deadweight** · 03-03-2014, 05:35 AM

That is easy to fix.
change

Code:

<script>
$(function(){
	
	$(document).on('click','#play',function(){
		create_popup();
	})
	
	
	$(document).on('click','#bce_popup',function(){
		close_pop()
	})
	
})

to

Code:

<script>
$(function(){
	
	create_popup();	
	
	$(document).on('click','#bce_popup',function(){
		close_pop()
	})
	
})

**itprosam** · 03-03-2014, 06:22 AM

thanks "Crazykld69" it worked ... please check and advise if it's working correctly as it supposed to.
is there a way I can make it only a session pop-up??
link is mentioned above..