0

ウェブアプリにGoogleマップ用のこの情報ボックスがあります。情報ボックスのリンクをクリックすると、ポップアップボックスが生成されます。どうやってやるの？

4

2 に答える 2

0

通常、ポップアップボックスはHTML/JavaScriptに使用されます。ポップアップボックスの完全なコードと互換性のあるテストブラウザを参照してください。

<style>
.poppup_overlay{
    display: none;
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:10001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}

.poppup_content {
    display: none;
    position: absolute;
    padding:5px;
    border: 0px solid orange;
    background-color: white;
    z-index:10002;
    overflow: auto;
    width:300px;
    left:44%;
    margin-top: -250px;
    margin-left: -250px;
    top: 40%;
}

.poppup-image {
    display: none;
    position: absolute;
    padding:5px;
    border: 0px solid orange;
    background-color: white;
    z-index:10002;
    overflow: auto;
    width:300px;
    left:50%;
    margin-top: -250px;
    margin-left: -180px;
    top: 40%;
}

</style>


<body>

<!------popup google map---------> 
<a class="" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('mapframe').src='embed URL here';">TEXT</a>
<div id="light" class="poppup_content"> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="images/close.gif" border="0" align="right" /> </a><br />
  <br />
  <iframe id="mapframe" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ></iframe>
  <br />
  <small><a href="embed URL here" style="color:#0000FF;text-align:left">TEXT</a></small></div>
<div id="fade" class="poppup_overlay">&nbsp;</div>


<!------popup image---------> 
<a class="" href = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('layout').src='images here';">Site Layout</a>
<div id="light1" class="poppup-image"> <a href = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'"><img src="images/close.gif" border="0" align="right" /> </a><br />
  <br />
  <img src="images here" align="right" /> </div>
<div id="fade" class="poppup_overlay">&nbsp;</div>

</body>
于 2013-03-06T07:31:10.053 に答える
0

情報ウィンドウにはHTMLを含めることができます。情報ウィンドウのコンテンツにリンクをコーディングするだけですが、通常はHTMLやJavaScriptを使用してポップアップを実行します。

<a href="page2.html" onclick="window.open('page2.html'); return false;" target="_blank">open popup</a>
于 2012-05-14T14:37:28.910 に答える