javascript - 如何将数据传递给 JavaScript "popup"div？

Question

我在页面中使用一个href“单击此处”链接，如果我们单击它将使用javascript打开一个弹出联系表单，这里我需要从a href将“id”之类的值获取到该弹出窗口中这样我就可以操作联系表单，

<a href="javascript:showDiv('Showcase_10','<?=$mainrow[1]?>')">Click Here</a>

JavaScript 函数:

function showDiv(DisplayDiv) { 
if (document.getElementById) { // DOM3 = IE5, NS6 
 if(document.getElementById("simpleMap"))
 {
  document.getElementById("simpleMap").style.visibility = 'hidden';
 }
 document.getElementById(DisplayDiv).style.visibility = 'visible'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.DisplayDiv.visibility = 'visible'; 
} 
else { // IE 4 
document.all.DisplayDiv.style.visibility = 'visible'; 
} 
} 
}

弹出屏幕:

<div id="Showcase_10" style="visibility:hidden;">

<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<form action='result.php' onSubmit="return valid()" method="post">
<input type="hidden" name="siteid" value="<? echo $_REQUEST['siteid']; ?>"> <table width="90%" bgcolor="#eff8ff" border="0" style="border:solid; border-width:1px; border-color:#ccc" align="center" cellpadding="2" cellspacing="3" class="small-content">
<tr><td width="6%">&nbsp;</td>
<td colspan="2" align="left" class="subhead">Email Property Details</td>
</tr><tr><td width="6%">&nbsp;</td><td class="cont">Request more information, make an appointment or ask a question. </td>
</tr>
<tr>
<td width="6%">&nbsp;</td>
<td width="94%"><strong>Name</strong><br/>
<input name="name" type="text" class="field1" value=""/>&nbsp;&nbsp;<font color="#FF0000"><strong>*</strong></font></td></tr>
<tr>
<td width="6%">&nbsp;</td>
<td width="94%"><strong>Your Email</strong><br />
<input name="email" type="text" class="field1" id="textfield2" value=''/>&nbsp;&nbsp;<font color="#FF0000"><strong>*</strong></font><br />
<font color="#FF0000" style="font-family: Verdana, sans-serif;font-size : 9pt;" class="form-list">
</font></td>
</tr>
<td colspan="2" align="center"></td>
</tr>
</table>
</form>
</div>
</div>
</div>

Answer 1

在 JavaScript 中:

window.open ("path/to/my/new/html/page.html?id=3","mywindow"); 

就像任何其他页面一样，get可用于传递您需要的数据，您可能需要先对其进行UrlEncode。

编辑:哦。您指的是模式对话框，而不是弹出窗口。在这种情况下，由于一旦页面加载，数据就需要完全显示在页面上，这样 ID 就可以出现在链接中，因此您有 2 个基本选项:1) 预加载所有点击链接的所有数据并将其存储在本地在 javascript 中，2) 将此方法分解为 ajax 调用，并使用 ajax 数据更新模式对话框控件。

1) 为了将其存储在 JavaScript 中，您可以轻松地构建自己的伪类原型(prototype)来保存每行的所有数据，从而允许您通过 id 将它们存储在关联数组中。

function myDataItem(id, field1) {
    this.id = id;
    this.field1 = field1;
    this.field2 = "";      // initialize a property called field2
    this.getInfo = getDataItemIno;
}

function getDataItemIno() {
    return this.field1 + ' ' + this.field2;
}

var items;
items[3] = new myDataItem(3, "datastring");

2) ajax 解决方案会稍微复杂一些，我建议使用 jQuery 来构建/处理所有这些方法，以保持其精简和简单。