Solved

simple php script for pop up box

Posted on 2014-04-23
11
22,170 Views
Last Modified: 2014-04-23
I want to allow a user to click on a link and for when they click the link a pop up box opens/pops up... (not a light box) just a basic image.
I want the box to be a png image that I have stored in mysite in my mysite/images folder called image1.png  I also would like to have white text on my png image with a button called continue and have the color of this button red with white text and when pressed turn green and the box to close.

any ideas?
My page is php
0
Comment
Question by:milkywaystudios
11 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40017208
I think your best approach to this would be to learn how jQuery and CSS interact.  The thing you want to learn first is the jQuery UI Dialog. Then you want to learn enough CSS that you can set the color and position of  text and a link button.  These are good learning resources for CSS:
http://www.w3schools.com/css/DEFAULT.asp
http://www.codecademy.com/tracks/web
http://www.w3.org/Style/CSS/learning.en.html
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40017209
Just to clarify - PHP is a server side language and is not used for dynamically displaying content in the browser - for that you need to use javascript.

Here is some code that demonstrates a way to do this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
	$('body').on('click','.closePopup', function() {
		$('.action input').css({backgroundColor: 'green'}).fadeOut(300, function() {
			$('.popupElement').remove()
		});
	});
	$('a').click(function(e) {
		e.preventDefault();
		var overlay = $('<div/>').addClass('overlay').addClass('popupElement');
		$('body').append(overlay);
		var popup = $('<div/>').addClass('popup').addClass('popupElement').css({left: '-999px'});
		var html = '<img src="' + $(this).attr('href') + '" /><div class="action"><input type="button" value="Continue" class="closePopup"/></div>';
		popup.html(html);
		$('body').append(popup);
		var left = ($(window).width() - popup.width()) >> 1;
		var top = ($(window).height() - popup.height()) >> 1;
		popup.css({left: left + 'px', top: top + 'px'});
	});
});
</script>
<style type="text/css">
.overlay {
	background: #999;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	opacity: 0.95;
	filter: alpha(opacity=95);
	z-index: 1;
}
.popup {
	background: #fff;
	border: 2px solid #333;
	border-radius: 5px;
	padding: 10px;
	position: absolute;
	z-index: 1000;
}
.popup img {
	display: block;
	margin-bottom: 15px;
}
.popup div.action {
	text-align: right;
}
.popup div.action input {
	background: red;
	color: white;
	border: red;
}
</style>
</head>
<body>
<a href="images/a3.jpg">Click me</a>
</body>
</html>

Open in new window

Working sample here http://www.marcorpsa.com/ee/t643.html
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40017228
JQueryUI is a bit of overkill for this particular scenario - very easy to do it with a few lines of jquery and some css.

Here is some updated code that includes a resize handler to ensure popup stays in centre of the screen when window size is changed. Also includes some comments on code
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  // CODE TO CLOSE THE POPUP
  // USE THE .on METHOD IN CASE WE
  // WANT TO MODIFY THIS TO LOAD POPUP
  // CONTENT VIA AJAX
  $('body').on('click','.closePopup', function() {
    // CHANGE BACKGROUND TO GREEN 
  // FOLLOWED BY A FADEOUT TO GIVE
  // A DELAY TO SHOW CHANGE IN COLOUR
    $('.action input').css({backgroundColor: 'green'}).fadeOut(300, function() {
    // REMOVE ALL ELEMENTS WITH THE 
    // popupElement STYLE - INCLUDES OVERLAY
    // AND POUP
      $('.popupElement').remove()
    });
  });
  // HANDLE THE WINDOW RESIZE.
  // WHEN WINDO IS RESIZED - MAKE SURE
  // POPUP STAYS CENTERED.
  $(window).resize(function() {
    // FIND THE POPUP
    var popup = $('#popupWindow');
  // IF IT EXISTS CENTRE IT
    if (popup.length > 0) {
      centerPopup();
    }
  });
  // TRIGER DISPLAY OF POPUP
  $('a').click(function(e) {
    // DISABLE DEFAULT CLICK FUNCTIONALITY FOR <a>
    e.preventDefault();
  // CREATE OUR OVERLAY AND APPEND TO BODY
    var overlay = $('<div/>').addClass('overlay').addClass('popupElement');
    $('body').append(overlay);
  // CREATE OUR POPUP AND POSITION OFFSCREEN.
  // WE DO THIS SO WE CAN DISPLAY IT AND CALCULATE
  // ITS WIDTH AND HEIGHT SO WE CAN CENTRE IT
    var popup = $('<div/>').attr('id','popupWindow').addClass('popup').addClass('popupElement').css({left: '-999px'});
  // CREATE THE HTML FOR THE POPUP
    var html = '<img src="' + $(this).attr('href') + '" /><div class="action"><input type="button" value="Continue" class="closePopup"/></div>';
    popup.html(html);
  // APPEND THE POPUP TO THE BODY
    $('body').append(popup);
  // AND CENTER IT
    centerPopup();
  });
});
// FUNCTION TO CENTER THE POPUP
function centerPopup()
{
  var popup = $('#popupWindow');
  // LEFT AND TOP VALUES IS HALF THE DIFFERENCE 
  // BETWEEN THE WINDOW AND POPUP METRICS.
  // USE THE SHIFT RIGHT OPERATOR TO DO DIV BY 2
  var left = ($(window).width() - popup.width()) >> 1;
  var top = ($(window).height() - popup.height()) >> 1;
  // SET LEFT AND TOP STYLES TO CALCULATED VALUES
  popup.css({left: left + 'px', top: top + 'px'});
}
</script>
<style type="text/css">
.overlay {
  background: #999;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0.95;
  filter: alpha(opacity=95);
  z-index: 1;
}
.popup {
  background: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
}
.popup img {
  display: block;
  margin-bottom: 15px;
}
.popup div.action {
  text-align: right;
}
.popup div.action input {
  background: red;
  color: white;
  border: red;
}
</style>
</head>
<body>
<a href="images/a3.jpg">Click me</a>
</body>
</html>

Open in new window

0
 

Author Comment

by:milkywaystudios
ID: 40017252
Hmm thanks for the support.
I really want to keep this as basic as possible as my page is running all kinds of things.
I dont want the background to go dark, just when you click a link, show the image in the center and a chance to close the image.

thanks
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40017273
The just make the overlay background whte or remove it entirely - as shown below.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  // CODE TO CLOSE THE POPUP
  // USE THE .on METHOD IN CASE WE
  // WANT TO MODIFY THIS TO LOAD POPUP
  // CONTENT VIA AJAX

  $('body').on('click','.closePopup', function() {

    // CHANGE BACKGROUND TO GREEN 
  // FOLLOWED BY A FADEOUT TO GIVE
  // A DELAY TO SHOW CHANGE IN COLOUR

    $('.action input').css({backgroundColor: 'green'}).fadeOut(300, function() {

    // REMOVE ALL ELEMENTS WITH THE 
    // popupElement STYLE - INCLUDES OVERLAY
    // AND POUP

      $('.popupElement').remove()
    });
  });

  // HANDLE THE WINDOW RESIZE.
  // WHEN WINDO IS RESIZED - MAKE SURE
  // POPUP STAYS CENTERED.

  $(window).resize(function() {

    // FIND THE POPUP

    var popup = $('#popupWindow');

  // IF IT EXISTS CENTRE IT

    if (popup.length > 0) {
      centerPopup();
    }
  });

  // TRIGER DISPLAY OF POPUP

  $('a').click(function(e) {

    // DISABLE DEFAULT CLICK FUNCTIONALITY FOR <a>

    e.preventDefault();

  // CREATE OUR POPUP AND POSITION OFFSCREEN.
  // WE DO THIS SO WE CAN DISPLAY IT AND CALCULATE
  // ITS WIDTH AND HEIGHT SO WE CAN CENTRE IT

    var popup = $('<div/>').attr('id','popupWindow').addClass('popup').addClass('popupElement').css({left: '-999px'});

  // CREATE THE HTML FOR THE POPUP

    var html = '<img src="' + $(this).attr('href') + '" /><div class="action"><input type="button" value="Continue" class="closePopup"/></div>';
    popup.html(html);

  // APPEND THE POPUP TO THE BODY

    $('body').append(popup);

  // AND CENTER IT

    centerPopup();
  });
});
// FUNCTION TO CENTER THE POPUP
function centerPopup()
{
  var popup = $('#popupWindow');

  // LEFT AND TOP VALUES IS HALF THE DIFFERENCE 
  // BETWEEN THE WINDOW AND POPUP METRICS.
  // USE THE SHIFT RIGHT OPERATOR TO DO DIV BY 2

  var left = ($(window).width() - popup.width()) >> 1;
  var top = ($(window).height() - popup.height()) >> 1;

  // SET LEFT AND TOP STYLES TO CALCULATED VALUES

  popup.css({left: left + 'px', top: top + 'px'});
}
</script>
<style type="text/css">
.popup {
  background: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
}
.popup img {
  display: block;
  margin-bottom: 15px;
}
.popup div.action {
  text-align: right;
}
.popup div.action input {
  background: red;
  color: white;
  border: red;
}
</style>
</head>
<body>
<a href="images/a3.jpg">Click me</a>
</body>
</html>

Open in new window

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40017290
If simple is what you want then I would not put the continue button - but rather would do something like this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('body').on('click','.closePopup', function() {
    $('.popupElement').remove()
  });

  $(window).resize(function() {
    var popup = $('#popupWindow');
    if (popup.length > 0) {
      centerPopup();
    }
  });

  $('a').click(function(e) {
    e.preventDefault();
    var popup = $('<div/>').attr('id','popupWindow').addClass('popup').addClass('popupElement').css({left: '-999px'});
    var html = '<a class="closePopup"></a><img src="' + $(this).attr('href') + '" /><div class="action"></div>';
    popup.html(html);
    $('body').append(popup);
    centerPopup();
  });
});

function centerPopup()
{
  var popup = $('#popupWindow');
  var left = ($(window).width() - popup.width()) >> 1;
  var top = ($(window).height() - popup.height()) >> 1;
  popup.css({left: left + 'px', top: top + 'px'});
}
</script>
<style type="text/css">
.popup {
  background: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
}
.popup img {
  display: block;
  margin-bottom: 15px;
}
.popup div.action {
  text-align: right;
}
.popup div.action input {
  background: red;
  color: white;
  border: red;
}
.closePopup {
	position: absolute;
	display: block;
	width: 32px;
	height: 32px;
	background: url(images/close-button.png) no-repeat 0 0;
	right: -16px;
	top: -16px;
}
</style>
</head>
<body>
<a href="images/a3.jpg">Click me</a>
</body>
</html>

Open in new window

Sample here http://www.marcorpsa.com/ee/t643a.html
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40017333
here's a super simple one:

<!doctype HTML>
<html>
	<head>
		<title></title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
		<style>
		*{
			box-sizing:border-box;
			font-family: sans-serif;
		}
			#popUp{
				display:none;
				position:relative;
				width:300px;
				height:150px;
				background:url(images/img.jpg) no-repeat;
				margin:50px auto;
				text-align: center;
				line-height: 150px;
			}

			#popUp .button{
				text-align: center;
				display:inline-block;
			}
			#popUp .button a{
				background-color: red;
				color:white;
				padding:10px 40px;
				height:30px;
				text-decoration: none;
			}
			#popUp .close-popUp{
				width:40px;
				height:40px;
				text-align: center;
				line-height: 40px;
				border:1px solid white;
				color:red;
				position: absolute;
				top:0;
				right:0;
				background-color: rgba(255,255,255,.5);
			}
		</style>
	</head>
	<body>
		<p> <a href="" class="open-popUp">open popup</a> </p>
		<div id="popUp">
			<div class="close-popUp">X</div>
			<div class="button"><a href="http://candpgen.com">Continue</a></div>
		</div>
	<script>
		$(".open-popUp").on('click', function(e){
			e.preventDefault();
			$("#popUp").show();
		})
		$(".close-popUp").on('click', function(e){
			e.preventDefault();
			$("#popUp").hide();
		})
	</script>		
	</body>
</html>

Open in new window

http://candpgeneration.com/EE/simple-popup.html
0
 

Author Comment

by:milkywaystudios
ID: 40017337
hi thanks for replies but I worked with julianH and sorted it thanks to all
0
 

Author Comment

by:milkywaystudios
ID: 40017358
Hi just an update it works fine, but.... it effects every link on my page which is not good, its only supposed to do the link I want :( any ideas.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 40017730
Yes - I posted sample code and bound the event to <a> elements.

Just give your link a class and bind to elements of that class like this
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('body').on('click','.closePopup', function() {
    $('.popupElement').remove()
  });

  $(window).resize(function() {
    var popup = $('#popupWindow');
    if (popup.length > 0) {
      centerPopup();
    }
  });
// CHANGE THIS TO ACT ON THE CLASS
  $('.myPopup').click(function(e) {
    e.preventDefault();
    var popup = $('<div/>').attr('id','popupWindow').addClass('popup').addClass('popupElement').css({left: '-999px'});
    var html = '<a class="closePopup"></a><img src="' + $(this).attr('href') + '" /><div class="action"></div>';
    popup.html(html);
    $('body').append(popup);
    centerPopup();
  });
});

function centerPopup()
{
  var popup = $('#popupWindow');
  var left = ($(window).width() - popup.width()) >> 1;
  var top = ($(window).height() - popup.height()) >> 1;
  popup.css({left: left + 'px', top: top + 'px'});
}
</script>
<style type="text/css">
.popup {
  background: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
}
.popup img {
  display: block;
  margin-bottom: 15px;
}
.popup div.action {
  text-align: right;
}
.popup div.action input {
  background: red;
  color: white;
  border: red;
}
.closePopup {
	position: absolute;
	display: block;
	width: 32px;
	height: 32px;
	background: url(images/close-button.png) no-repeat 0 0;
	right: -16px;
	top: -16px;
}
</style>
</head>
<body>
<!-- GIVE YOUR ELEMENTS A CLASS THAT IS BOUND TO THE EVENT HANDLER -->
<a href="images/a3.jpg" class="myPopup">Click me</a>
</body>
</html> 

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Button Css BootStrap 2 34
how can display objects ? 3 22
Error on link 14 37
Creating a dynamic URL - set dates to upcoming weekend 6 30
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now