クリック時に画像ポップアップを作成する

-2

私は従業員の名前を示すデータテーブルを作成しています。ポップアップウィンドウに表示されたカードを画像として表示する必要があるボタンがあります。 PHPでボタンをクリックしてイメージポップアップを作成するにはどうすればよいですか？クリック時に画像ポップアップを作成する

出典

2017-11-12 gfdfgf fgfdfg

閉じる前にコードを追加する –

-1

PHPはサーバー側の言語ですが、おそらくイメージを読み込むことになりますが、ポップアップを作成するにはJavaScriptが適切です。

JQuery UIを使用するこの例では、https://www.tutorialspoint.com/jqueryui/jqueryui_dialog.htmから抜粋して少し修正しました。表示されているように、画像はdiv内にあり、ボタンがクリックされたときにのみ表示されます。

<!doctype html> 
 
<html lang = "en"> 
 
    <head> 
 
     <meta charset = "utf-8"> 
 
     <title>jQuery UI Dialog functionality</title> 
 
     <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
 
     rel = "stylesheet"> 
 
     <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
 
     
 
     <!-- CSS --> 
 
     <style> 
 
     .ui-widget-header,.ui-state-default, ui-button { 
 
      background:#b9cd6d; 
 
      border: 1px solid #b9cd6d; 
 
      color: #FFFFFF; 
 
      font-weight: bold; 
 
     } 
 
     </style> 
 
     
 
     <!-- Javascript --> 
 
     <script> 
 
     $(function() { 
 
      $("#dialog-1").dialog({ 
 
       autoOpen: false, 
 
      }); 
 
      $("#opener").click(function() { 
 
       $("#dialog-1").dialog("open"); 
 
      }); 
 
     }); 
 
     </script> 
 
    </head> 
 
    
 
    <body> 
 
     <!-- HTML --> 
 
     <div id = "dialog-1" 
 
     title = "Dialog Title goes here..."> 
 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSxWoaauTn8dhwJgaQW3ha-hRGYdxKqMhWU94hcEMn0oxY9tCe"> 
 
    </div> 
 
     <button id = "opener">Open Dialog</button> 
 
    </body> 
 
</html>

そして、あなたがあなたの質問にしようとしたものを私たちを見ます！

出典

2017-11-12 17:46:17 FelDev

クリック時に画像ポップアップを作成する

答えて

関連する問題