Click here to Skip to main content
15,394,438 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
In php how to create popup window...
Posted
Updated 9-Feb-22 0:16am

See the following links:

http://www.php-development.ru/javascripts/popup-window.php[^]

Using javascript you can create windows and not by PHP.

http://www.codingforums.com/archive/index.php/t-64888.html[^]
   
HTML
<!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>
   
As was noted in one of the above comments, php is server side - it finishes all of its work before it ever gets to the user. I understand a possible need for a server-side popup in that the content may need to be customized on-the-fly with server content.

You'll need something on the client side to respond to a user (a client).
One way I do this is to create an empty <div> in the center of the screen. It has no content and is completely transparent in all ways. Inside of it you can create any type of HTML you wish. This is done with AJAX [^] (and thus requires javaScript). You create a visible box by changing the invisible boxes' content [via innerHTML]. Buttons (or anything else) can be part of that content. If you wish the buttons to interact with the user, have that interaction already existing on you page (it's hard to do, otherwise) and have you events call it. It is even possible to include javaScript in your AJAX update - a b it more skill required to execute it. You can make the box go away in your script by changing its contents (innerHTML) to nothing.

That all being said, if you're already using javaScript on the client side, unless the data only exists on the server, you don't want' to php it - you want to javascript it.

If this or any of the other replies solves your problem, please use it to mark the question closed.

   
XML
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello! I am an alert box!");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="Show alert box" />

</body>
</html>
   
Comments
Killzone DeathMan 17-May-13 12:29pm
   
Nice try men, but this is javascript! He means in PHP!
PHP is server side and I think you cant show popup window with PHP :P
But with PHP you can print like this:

echo '
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello! I am an alert box!");
</script>
</head>
<body>

</body>
</html>';
//popup in php
$a=1;
if ($a==1)
{
$message = 'thank you.';
<SCRIPT>
echo "alert('$message')";
</SCRIPT>
}
?>
   
v2
Comments
Richard MacCutchan 22-Jun-15 13:39pm
   
This question is more than three years old; please do not waste time replying to such questions.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900