如何让 html 弹出窗口出现在主 html 页面上？

【问题标题】：How to have html popup appear over main html page?如何让 html 弹出窗口出现在主 html 页面上？
【发布时间】：2017-07-06 13:32:22
【问题描述】：

我一直在制作网站简历，我希望用户能够点击我工作过的公司的图片，并显示我的工作经历描述。我可以点击图片并在顶部弹出一个 div，如下所示：

关于如何做到这一点的任何想法？

【问题讨论】：

你想做什么？
您问您如何制作弹出窗口或 wat ？ @bsteven ？
在这个社区提出问题时，您应该付出更多的努力。请搜索“如何提问”页面，了解有关如何创建更受欢迎的问题的一些提示。
基本上，我希望能够制作这样的弹出窗口：blackrockdigital.github.io/startbootstrap-freelancer
它的免费主题你可以修改和使用它

标签： javascript jquery html css

【解决方案1】：

您可以将 css 设置为要在 html 页面上显示的弹出 div。考虑以下例如：

#mainPage {
  width: 100%;
  height: 100%
}

#popUp {
  display: none;
  z-index: 100;
  width: 200px;
  height: 50px;
  background: #ADD;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body>
  <div id="mainPage">
    <img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" width="20%" />
  </div>
  <div id="popUp">
    <p>Hello !!! It's a popup div </p>
  </div>
</body>
<script type="text/javascript">
  $(function() {
    $('#mainPage img').on('click', function() {
      $('#popUp').show();
    });
  });
</script>

</html>

【讨论】：