Question

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

我有2个团队和国家的浏览按钮。每当用户单击任何浏览按钮时，团队或国家/地区的列表将以不同的形式出现。当表单出现或处于活动状态时，页面应仅关注表单。只有当用户从列表中选择或取消选择时，他才能专注于主表单。当你向朋友推荐朋友时，我希望它与facebook类似。

我建议你运行我的代码，这样你就可以看到我想要做的事情。

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>

注意：我想使用原生javascript。

我真的需要你的帮助。提前谢谢。

Answer 1

您希望获得包含要显示的信息的模型窗口。您可以使用像prettyPhoto这样的基于jQuery的JavaScript解决方案来实现这一效果。

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

看看在文档上加载外部网站/ iframe。

Answer 2

您的

function showBrowseOption (optionId) { 
  document.getElementById(optionId).style.display = ''; 
 }

应该是这样的

        function showBrowseOption (optionId) { 
              document.getElementById(optionId).style.display = ''; 
    document.getElementById(optionId).style.position = 'fixed';
     document.getElementById(optionId).style.width = '800px';
    document.getElementById(optionId).style.height = '500px';
    document.getElementById(optionId).left = '150px';
document.getElementById(optionId).style.overflow = 'scroll';
             }

如何使用javascript使html div看起来像一个单独的窗体或窗口？

2 个答案: