Question

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

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

Answer 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>

如何在主html页面上显示html弹出窗口？

1 个答案: