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

让我先解释一下我想发生什么

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

我建议您运行我的代码，这样您就可以看到我试图做什么

index.html

功能性隐匿症（optionId）{
document.getElementById（optionId）.style.display='none'；
}
功能showBrowseOption（选项ID）{
document.getElementById（optionId）.style.display=''；
}
功能选择团队（团队ID）{
document.getElementById（'fpTeamTxt'）。value=document.getElementById（teamId）.innerHTML；
document.getElementById（'optionTeam'）.style.display='none'；
}
功能选择国家（countryId）{
document.getElementById（'fpCountryTxt'）。value=document.getElementById（countryId）.innerHTML；
document.getElementById（'optionCountry'）。style.display='none'；
}
姓名：
小组：
国家：
拜仁慕尼黑
皇家马德里
巴塞罗那足球俱乐部
曼彻斯特联队
桑托斯
AC米兰
德国
葡萄牙
西班牙
英格兰
巴西
意大利

注意：我想使用本机javascript来完成

---

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

看起来您希望获得一个包含要显示的信息的模型窗口。您可以使用基于jQuery的JavaScript解决方案（如PrettyTo）来获得这种效果

---

查看文档中的加载外部站点/iframe。

看起来您希望获得一个包含要显示信息的模型窗口。您可以使用基于jQuery的JavaScript解决方案（如PrettyTo）来获得这种效果

查看文档中的加载外部站点/iframe。

您的

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';
             } 

你的

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';
             } 

---

我可以不使用jQuery而改为使用本机Javascript吗？试试这个，这是一个本机Javascript lightbox（漂亮的照片实际上是它的克隆）@ChickenBoy：是的，你可以，在jQuery中所有可能的Javascript都是可行的，我可以不使用jQuery而改为使用本机Javascript吗？试试这个，这是一个本机JavaScript lightbox（pretty photo实际上是它的克隆）@ChickenBoy：是的，你可以，在JQueryTanks中，JavaScript中的一切都是可行的，但我仍然可以在主页上键入。我希望在表单处于活动状态时禁用该页面。谢谢，但我仍然可以在主页上键入。我希望在窗体处于活动状态时禁用该页。