Ouvrir page dans fenêtre modale

Ouvrir page dans fenêtre modale - HTML/CSS - Programmation

Marsh Posté le 25-04-2014 à 14:01:33    

Bonjour à tous,

 

J'ai trouvé sur internet un script permettant d'ouvrir une fenêtre modale en html et css. J'aimerais mettre dans cette fenêtre modale une autre page en php contenant du python.

 

Où placer ma page php contenant du python dans le script avec la fenêtre modale svp ?

 

Mon script avec la fenêtre modale (test9.php) :

 
Code :
  1. <!doctype html>
  2. <!--[if lt IE 7 ]><html class="ie6" lang="en"><![endif]-->
  3. <!--[if IE 7 ]><html class="ie7" lang="en"><![endif]-->
  4. <!--[if IE 8 ]><html class="ie8" lang="en"><![endif]-->
  5. <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
  6. <head>
  7. <meta charset="utf-8" />
  8. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  9. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
  10. <meta name="robots" content="noindex, nofollow">
  11. <title>Modal Windows with HTML and CSS</title>
  12. <link rel="stylesheet" href="_/css/style.css" />
  13. <link rel="shortcut icon" href="/favicon.ico">
  14. <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  15. <script src="/mint/?js"></script>
  16. <style>
  17. #wrap{
  18.  margin: 0 auto;
  19.  width: 600px;
  20.  padding: 40px 0;
  21. }
  23. /* modal wrapper */
  24. #modal-outer{
  25.  display: none;
  26.  position: absolute;
  27.  top: 0;
  28.  right: 0;
  29.  bottom: 0;
  30.  left: 0;
  31.  z-index: 9999;
  32.  background: gray;
  33.  background: rgba(0, 0, 0, .5);
  34.  filter: alpha(opacity=50);
  35.  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  36. }
  37. #modal-outer:target {
  38.  display: block;
  39. }
  41. /* modal inner */
  42. #modal{
  43.  width: 460px;
  44.  height: auto;
  45.  visibility: visible;
  46.  display: block;
  47.  /**/
  48.  z-index: 6000;
  49.  padding: 20px;
  50.  position: relative;
  51.  margin: 90px auto 40px;
  52.  overflow: visible;
  53.  background-color: white;
  54.  border: 1px solid #CCC 9;
  55.  -webkit-background-clip: padding-box;
  56.  -moz-background-clip: padding;
  57.  background-clip: padding-box;
  58.  -webkit-border-radius: 6px;
  59.  -moz-border-radius: 6px;
  60.  border-radius: 6px;
  61.  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .4),inset 0 1px 0 rgba(255, 255, 255, .5);
  62.  -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .4),inset 0 1px 0 rgba(255, 255, 255, .5);
  63.  box-shadow: 0 4px 12px rgba(0, 0, 0, .4),inset 0 1px 0 rgba(255, 255, 255, .5);
  64. }
  66. /* modal close button */
  67. #modal a[href="#close"] {
  68.  position: absolute;
  69.  right: 0;
  70.  top: 0;
  71.  color: transparent;
  72.  font-size: 0px;
  73. }
  74. #modal a[href="#close"]:focus {
  75.  outline: none;
  76. }
  77. #modal a[href="#close"]:after {
  78.  content: 'X';
  79.  display: block;
  80.  position: absolute;
  81.  right: -16px;
  82.  top: -16px;
  83.  width: 20px;
  84.  height: 15px;
  85.  padding: 11px 7px 8px 7px;
  86.  text-decoration: none;
  87.  text-shadow: none;
  88.  text-align: center;
  89.  background: black;
  90.  color: white;
  91.  border: 3px solid white;
  92.  -moz-border-radius: 20px;
  93.  border-radius: 40px;
  94.  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  95.  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  96.  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  97.  font-size: 12px;
  98.  font-weight: bold;
  99. }
  100. #modal a[href="#close"]:focus:after {
  101.  outline: 1px solid #000;
  102. }
  103. </style>
  104. </head>
  105. <body>
  106. <div id="wrap">
  107. <p><a id="click" href="#modal-outer">Voir mesure hygrométrie</a></p>
  108. <div id="modal-outer">
  109.  <div id="modal">
  110.   <a href="#close" title="Close">Close</a>
  111.  </div>
  112. </div>
  113. </div>
  114. </script>
  115. </body>
  116. </html>
 

Mon script en php que je dois y insérer (valeur.php) :

 
Code :
  1. <!DOCTYPE html>
  2. <html>
  3.     <body onLoad="window.setTimeout('history.go(0)', 3000)">
  4.        
  5.         <?php
  6.         $output = shell_exec('python affichage.py');
  7.  echo "<pre>$output</pre>"; 
  8.         ?>                   
  9.    
  10.     </body>
  11. </html>
 

Mon script Python (affichage.py) :

 
Code :
  1. #!/usr/bin/python
  3. import serial
  4. import time
  6. locations=['/dev/ttyACM0']
  8. for device in locations:
  9.     try:
  10.         ser = serial.Serial(device, baudrate=9600, timeout=1, writeTimeout=1)
  11.         line = ser.readlines()[4].strip('\n')
  12.         print line
  14.     except Exception as why:
  15.             import pwd, os
  16.             print "Echec de connexion : %s" % why
  17.             print "whoami:", pwd.getpwuid(os.getuid())[0]
 

Si vous avez une autre solution plus simple à mon problème avec un autre langage de programmation je suis prenant :D Mais pourriez-vous svp me l'expliquer avec des détails car je ne connais que le PHP, HTML et CSS ? Merci :)


Message édité par Prav26 le 25-04-2014 à 16:01:29
Reply

Marsh Posté le 25-04-2014 à 14:01:33   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed