Question

我想通过单击按钮每次在html页面上显示一个窗口（面板）。但我不希望它影响页面。例如，我不希望它改变页面的大小并使页面滚动。实际上我想在谷歌地图上显示一个面板，并在这个面板上添加一些输入框，但我无法在地图上显示任何内容。这张照片显示了我想要的东西。

Answer 1

制作小组position: fixed或position: absolute以及<body的小孩，面板将覆盖当前内容，而不会导致页面大小增加。

Answer 2

简单的例子。请参阅小提琴http://jsfiddle.net/6XCjb/

<html>
<head>
   <style>
      .panel { 
         background: #ccc; 
         padding: 20px; 
         position: absolute;
         top: 30px;
         left: 30px;
         width: 100px;
         height: 100px;
         z-index: 1000;
      }
   </style>
</head>
<body>
  <div class="panel">
    This is panel
  </div>
  <div class="map">
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ru/maps?hl=ru&amp;ie=UTF8&amp;ll=55.795502,49.073303&amp;spn=0.709453,2.113495&amp;t=m&amp;z=10&amp;output=embed"></iframe><br /><small><a href="https://maps.google.ru/maps?hl=ru&amp;ie=UTF8&amp;ll=55.795502,49.073303&amp;spn=0.709453,2.113495&amp;t=m&amp;z=10&amp;source=embed" style="color:#0000FF;text-align:left">Просмотреть увеличенную карту</a></small>
  </div>
</body>
</html>

在html页面上显示一个面板而不影响内容

2 个答案: