【解決方法】PHPでポップアップウィンドウを作成するには?

[ad_1]

PHPでポップアップウィンドウを作成する方法…

解決策 1
解決策 4
解決策 6
解決策 2
解決策 3

解決策 1

次のリンクを参照してください。

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

Javascript を使用すると、PHP ではなくウィンドウを作成できます。

http://www.codingforums.com/archive/index.php/t-64888.html[^]

解決策 4

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>

解決策 6

上記のコメントの 1 つに記載されているように、php はサーバー側です。ユーザーに到達する前にすべての作業を終了します。サーバーコンテンツを使用してオンザフライでコンテンツをカスタマイズする必要がある場合があるという点で、サーバー側のポップアップが必要になる可能性があることを理解しています。

ユーザー (クライアント) に応答するには、クライアント側で何かが必要になります。

これを行う 1 つの方法は、画面の中央に空の

を作成することです。コンテンツはなく、あらゆる点で完全に透過的です。その中には、任意のタイプの HTML を作成できます。これは AJAX [^] (したがって、javaScript が必要です)。目に見えないボックスの内容を変更して、目に見えるボックスを作成します [via innerHTML]. ボタン (またはその他のもの) は、そのコンテンツの一部にすることができます。ボタンがユーザーと対話するようにしたい場合は、その対話がページに既に存在していて (それ以外の場合は実行が困難です)、イベントでそれを呼び出すようにします。 AJAX の更新に javaScript を含めることもできますが、それを実行するにはより多くのスキルが必要です。ボックスの内容 (innerHTML) を何も変更しないことで、スクリプト内でボックスを非表示にすることができます。

つまり、クライアント側ですでに JavaScript を使用している場合、データがサーバー上にのみ存在する場合を除き、それを PHP で処理する必要はなく、JavaScript で処理する必要があります。

この回答またはその他の回答で問題が解決した場合は、それを使用して質問をクローズしてください。

解決策 2

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>