让我首先解释一下我想要发生的事情。
我有 2 个用于团队和国家/地区的浏览按钮。每当用户单击任何浏览按钮时，团队或国家/地区列表都会以不同的形式出现。当表单出现或处于事件状态时，页面应仅关注表单。只有当用户从列表中选择或取消选择时，他才能将注意力集中在主窗体上。我希望它能像 Facebook 中那样向 friend 推荐 friend 。
我建议您运行我的代码，以便您可以看到我正在尝试做什么。
index.html
<html>
<head>
<script type="text/javascript">
function hideBrowseOption (optionId) {
document.getElementById(optionId).style.display = 'none';
}
function showBrowseOption (optionId) {
document.getElementById(optionId).style.display = '';
}
function selectTeam (teamId) {
document.getElementById('fpTeamTxt').value = document.getElementById(teamId).innerHTML;
document.getElementById('optionTeam').style.display = 'none';
}
function selectCountry (countryId) {
document.getElementById('fpCountryTxt').value = document.getElementById(countryId).innerHTML;
document.getElementById('optionCountry').style.display = 'none';
}
</script>
</head>
<body onload="hideBrowseOption ('optionTeam'); hideBrowseOption ('optionCountry');">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" id="fpNameTxt" name="fpNameTxt">
</td>
</tr>
<tr>
<td>Team:</td>
<td>
<input type="text" id="fpTeamTxt" name="fpTeamTxt">
<input type="button" id="fpTeamBrowse" name="fpTeamBrowse" value="Browse" onclick="showBrowseOption ('optionTeam')">
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<input type="text" id="fpCountryTxt" name="fpCountryTxt">
<input type="button" id="fpCountryBrowse" name="fpCountryBrowse" value="Browse" onclick="showBrowseOption ('optionCountry')">
</td>
</tr>
</table>
<div id="optionTeam">
<table>
<tr>
<td id="team1">FC Bayern</td>
<td><input type="button" value="Select" onclick="selectTeam ('team1');"> </td>
</tr>
<tr>
<td id="team2">Real Madrid</td>
<td><input type="button" value="Select" onclick="selectTeam ('team2');"> </td>
</tr>
<tr>
<td id="team3">FC Barcelona</td>
<td><input type="button" value="Select" onclick="selectTeam ('team3');"> </td>
</tr>
<tr>
<td id="team4">Manchester United</td>
<td><input type="button" value="Select" onclick="selectTeam ('team4');"> </td>
</tr>
<tr>
<td id="team5">Santos</td>
<td><input type="button" value="Select" onclick="selectTeam ('team5');"> </td>
</tr>
<tr>
<td id="team6">AC Milan</td>
<td><input type="button" value="Select" onclick="selectTeam ('team6');"> </td>
</tr>
</table>
<input type="button" value="Cancel" onclick="hideBrowseOption ('optionTeam');" >
</div>
<div id="optionCountry">
<table>
<tr>
<td id="country1">Germany</td>
<td><input type="button" value="Select" onclick="selectCountry ('country1');"> </td>
</tr>
<tr>
<td id="country2">Portugal</td>
<td><input type="button" value="Select" onclick="selectCountry ('country2');"> </td>
</tr>
<tr>
<td id="country3">Spain</td>
<td><input type="button" value="Select" onclick="selectCountry ('country3');"> </td>
</tr>
<tr>
<td id="country4">England</td>
<td><input type="button" value="Select" onclick="selectCountry ('country4');"> </td>
</tr>
<tr>
<td id="country5">Brazil</td>
<td><input type="button" value="Select" onclick="selectCountry ('country5');"> </td>
</tr>
<tr>
<td id="country6">Italy</td>
<td><input type="button" value="Select" onclick="selectCountry ('country6');"> </td>
</tr>
</table>
<input type="button" value="Cancel" onclick="hideBrowseOption ('optionCountry');" >
</div>
</body>
</html>
注意:我想使用 native JavaScript 来完成此操作。
我真的需要你的帮助。
最佳答案
看起来您想要获得一个模型窗口，其中包含您想要显示的信息。您可以使用基于 jQuery 的 JavaScript 解决方案(例如 PrettyPhoto)来获得该效果。
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
查看文档中加载外部站点/iframe 的内容。
关于javascript - 如何使用 JavaScript 使 html div 显示为单独的表单或窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8152061/