gpt4 book ai didi

javascript - 如何使用 JavaScript 使 html div 显示为单独的表单或窗口?

转载 作者:行者123 更新时间:2023-11-28 16:25:37 25 4
gpt4 key购买 nike

让我首先解释一下我想要发生的事情。

我有 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com