Javascript 使用onclick事件创建iframe覆盖_Javascript_Css_Iframe

Javascript 使用onclick事件创建iframe覆盖

javascript css iframe

Javascript 使用onclick事件创建iframe覆盖,javascript,css,iframe,Javascript,Css,Iframe,我的网站上有一个嵌入式谷歌地图，当点击按钮时，它会改变位置 <% provide(:title, "Car Pooling") %> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <h1>Car Pooling</h1> <body> <button data-long="2

我的网站上有一个嵌入式谷歌地图，当点击按钮时，它会改变位置

<% provide(:title, "Car Pooling") %>

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

    <h1>Car Pooling</h1>

<body>
<button data-long="23.7454209" data-lat="37.9758438" typeof="button">Na Fianna</button>
<button data-long="2.3470599" data-lat="48.8588589" typeof="button">St. Pauls</button>
<button data-long="-122.081267" data-lat="37.4038194" typeof="button">Kevins</button>
<br>
<div id="info">48.8588589,2.3470599</div>
<br>
<iframe id="map" width="600" height="450" src="https://www.google.com/maps/embed/v1/view?key=AIzaSyDxbtgKBohoqXqwPNEYOUGB5WNftHUVDWw&amp;center=48.8588589,2.3470599&amp;zoom=18&amp;maptype=roadmap" frameborder="0" style="border: 0px currentColor; border-image: none;"></iframe>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
_uacct = "UA-162157-1";
urchinTracker();
</script> 

</body>

我想只显示按钮，然后当一个按钮被点击时，地图显示为一个覆盖在屏幕中央的前景，背景稍微褪色

有人能就如何解决这个问题提出建议吗？应该使用CSS还是javascript来完成这项工作？

我将使用JQuery和CSS来完成类似的工作，如下所示。使用此方法，您可以灵活地根据自己的喜好微调效果

CSS:

JQuery：

  $('button').click(function(){
    $('iframe').fadeIn('slow');
    $('body').toggleClass('body-shade');
  });

请记住，您可以通过jquery函数或CSS3 transition减缓效果并使用此方法进行更改。

感谢您的帮助。它现在不显示地图，除非当我按钮被点击，这是伟大的。它并没有显示为一个覆盖虽然-只是作为页面的一部分。我现在还需要在地图上添加一个关闭选项，以便将其从页面上清除。有什么建议吗？？？没问题。不确定到底是什么原因导致了您的问题，因此我制作了一个代码笔，其中包含了您的代码的基本示例以及我建议的css和jquery，您可以看到一个工作示例，Iframe可能不在那里，但按钮和主体阴影可以工作。

iframe {
    display: none;
    z-index: 2;
    transition: all 0.8s ease;
}

.body-shade {
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.5);
}

  $('button').click(function(){
    $('iframe').fadeIn('slow');
    $('body').toggleClass('body-shade');
  });