Popup für dynamisch generierte Daten

Ich verwende Google Script, um Daten zu generieren, die jeweils aus einem Bild und einem Namen bestehen. Ich kann das Popup für einen Gegenstand tun.Popup für dynamisch generierte Daten

Wie geht das mit den generierten Elementen?

Hier ist mein Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa:400,700|Cairo&amp;subset=arabic" rel="stylesheet"> 
 
<meta content="ar-bh" http-equiv="Content-Language" /> 
 
<meta content="text/html; charset=windows-1256" http-equiv="Content-Type" /> 
 
<title>Untitled 1</title> 
 
<style type="text/css"> 
 
td {border: 1px solid #ccc;}</style> 
 

 
<style type="text/css"> 
 
     body { 
 
    font-family: 'Aref Ruqaa', serif; 
 
    } 
 
      #largeImgPanel { 
 
       text-align: center; 
 
       display: none; 
 
       position: fixed; 
 
       z-index: 100; 
 
       top: 0; left: 0; width: 100%; height: 100%; 
 
       background-color: rgba(100,100,100, 0.5); 
 
      } 
 
     </style>  
 

 
<style> 
 
#table_id {display: block; } 
 
#table_id td {display: inline-block; } 
 

 
#rcorners6 { 
 
    border-radius: 15px 50px; 
 
    background: #73AD21; 
 
    padding: 0px; 
 
    width: 150px; 
 
    height: 25x; 
 
} 
 
</style> 
 

 
<style> 
 
div.polaroid2 { 
 
    width: 200px; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    text-align: center; 
 
} 
 
div.polaroid { 
 
width: 200px; 
 

 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 
    text-align: center; 
 
} 
 

 
div.container { 
 
    padding: 1px; 
 
} 
 
</style> 
 

 
<style> 
 
/* Popup container - can be anything you want */ 
 
.popup { 
 
    position: relative; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
/* The actual popup */ 
 
.popup .popuptext { 
 
    visibility: hidden; 
 
    width: 160px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 8px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -80px; 
 
} 
 

 
/* Popup arrow */ 
 
.popup .popuptext::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 
/* Toggle this class - hide and show the popup */ 
 
.popup .show { 
 
    visibility: visible; 
 
    -webkit-animation: fadeIn 1s; 
 
    animation: fadeIn 1s; 
 
} 
 

 
/* Add animation (fade in the popup) */ 
 
@-webkit-keyframes fadeIn { 
 
    from {opacity: 0;} 
 
    to {opacity: 1;} 
 
} 
 

 
@keyframes fadeIn { 
 
    from {opacity: 0;} 
 
    to {opacity:1 ;} 
 
} 
 
</style> 
 

 

 
</head> 
 

 
<body> 
 

 
    
 
<table id="table_id" align="center" cellpadding="10" > 
 
\t <tr> 
 
    <? var data = getData1(); ?> 
 
<? for (var i = 2; i <= 1+data[0][3] ; i++) { ?> 
 
\t \t <td style="border-width: 0"><div class="polaroid"> 
 
    <img height="160" src=<?= data[i][8] ?> width="127" style="text-align: center" > 
 
    <div id='a<?= i ?>' class="popup" onclick="myFunction()" class="container"> 
 
    <?= data[i][3] ?> <br> <?= data[i][4] ?> <span class="popuptext" id='myPopup<?= i ?>'><?= data[i][3] ?> ميااااااو</span> 
 
    </div> 
 
</div></td> 
 

 
<script> 
 
// When the user clicks on div, open the popup 
 
function myFunction() { 
 
    var popup = document.getElementById('myPopup'); 
 
    popup.classList.toggle('show'); 
 
} 
 
</script> 
 

 
<? } ?> 
 

 

 

 
\t </tr> 
 
</table> 
 
    
 

 
    
 
<meta content="Sheets" name="generator" /> 
 
<style type="text/css"><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;} 
 
.auto-style1 { 
 
\t border-collapse: collapse; 
 
\t border: 2px solid #000000; 
 
} 
 
.auto-style2 { 
 
\t direction: rtl; 
 
} 
 
.auto-style3 { 
 
\t border-width: 0; 
 
} 
 
.auto-style4 { 
 
\t font-size: midium; 
 
} 
 
.auto-style5 { 
 
\t direction: rtl; 
 
\t font-size: midium; 
 
} 
 
.auto-style6 { 
 
\t font-size: midium; 
 
} 
 
--></style> 
 

 

 
</body> 
 
<p> 
 
<img border="0" src="https://drive.google.com/uc?export=download&id=0B33gublUUxAtYkRPUjFVUGExNm8" width="90" height="12" align="left"></p> 
 
    
 

 

 
</html>

und hier ist das, was ich

https://script.google.com/macros/s/AKfycbxxV4G7YN7Pg3C-aZIniNPExNI7jQhMn7-O92RA60dtDmX17Ko/exec?page=2

Quelle

2017-01-28 Mohd Hassan

können Sie bitte ein funktionierendes Beispiel zur Verfügung stellen? Sie haben PHP-Code auf Ihrer Probe, die Ihren Javascript-Code Zweck – Roljhon

bricht Eigentlich ist dies Google-Skript kein PHP überhaupt. Danke für die Antwort, aber ich habe Ihre Antwort für mein Problem nicht bekommen. Mein Skript ist zum Suchen und zeigt Elemente als Bild und einige Informationen und ich möchte irgendwo auf den Artikel klicken, um ein Popup für einige andere Details anzuzeigen. –

Ich habe versucht, meine Antwort unten von Ihrer Website tatsächlich, es liegt an Ihnen, wie Sie versuchen werden, es zu verwenden – Roljhon

Verteilen Sie Ihre toggle Veranstaltung wie diese unten erhalten:

function myFunction(element) { 
    element.childNodes[3].classList.toggle('show'); 
}

Aktualisieren Sie Ihren onclick zu myFunction(this).

Es gibt viele Möglichkeiten, dies zu tun, aber so mache ich es seit der span Elementposition, wenn angenommen wird, dass sie statisch ist.

Quelle

2017-01-28 14:19:54 Roljhon

Popup für dynamisch generierte Daten

Antwort

Verwandte Themen