HTML JSポップアップウインドウ（ウインドウ内）

マーカーをクリックするたびにポップアップウィンドウのようなものを作成しようとしています。ポップアップウィンドウは現在のウィンドウの内側にありますが、残りのウィンドウは完全に動作します。HTML JSポップアップウインドウ（ウインドウ内）

この最低料金：私はこのような何かを達成したいマーカーをクリックした場合 http://imgur.com/pvU4zoz ：ここ http://imgur.com/kX3aEIc

は私のコードです：

<!DOCTYPE html> 
<html style="height:100%;"> 
<body style="height:100%;margin:0;padding:0;"> 
    <div id="googleMap" style="width:100%;height:100%;"></div> 
    <script> 
    var map; 
     function myMap() { 
      var mapProp= { 
       center:new google.maps.LatLng(51.508742,-0.120850), 
       zoom:5, 
      }; 
      map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

     } 
    </script> 
    <script type="text/javascript"> 
     function TCPConnection() 
     { 

      var connection = new WebSocket('ws://127.0.0.1:8001'); 
      // When the connection is open, send some data to the server 
      connection.onopen = function() { 
       connection.send('Ping'); // Send the message 'Ping' to the server 
      }; 

      // Log errors 
      connection.onerror = function (error) { 
       console.log('WebSocket Error ' + error); 
      }; 
      var contentString = '<p><b>TEST</b></p>' 
      var infoWindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 

      // Log messages from the server 
      connection.onmessage = function (e) { 
       var marker = new google.maps.Marker({ 
        position: {lat: 51.508742, lng:-0.120850}, 
        map: map, 
        title: 'Test marker', 
        label: 'A' 
       }); 
       marker.addListener('click',function(){ 
        infoWindow.open(map,marker); 
        alert("Test\nTest?"); 

       }); 
       console.log('Server: ' + e.data); 

      }; 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&callback=myMap"></script> 
    <script> TCPConnection();</script> 
</body>

出典

2017-02-22 Tudor Balas

あなたの問題はかなりありますCSSと少しのjavascript（必要な場合）で解決するのは簡単です。

HTML

<div id="myPopUp"> 
    TEST 
</div>

CSS

#myPopUp { 
    display: none; 
    position: absolute; 
    transform: translateX(-50%); 
    background-color: #FFF; 
    border: 1px solid #DEDEDE; 
    border-radius: 3px; 
    z-index: 99; 
}

Javascriptを

function showPopUp(x, y, text, duration) { 
    var myPopUp = document.getElementById("myPopUp"); 
    myPopUp.style.display = 'block'; 
    myPopUp.style.left = x + 'px'; 
    myPopUp.style.top = y + 'px'; 
    myPopUp.innerHTML = text; 
    if (duration) { // duration in ms *optionnal 
    window.setTimeout(hidePopUp, duration); 
    } 
} 

function hidePopUp() { 
    var myPopUp = document.getElementById("myPopUp"); 
    myPopUp.style.display = 'none'; 
}

マーカーにクリックイベントを追加すると、コールバックの引数にイベントを含めることができます。クリック（またはマーカー）の位置はその中にある必要があります。

marker.addListener('click',function(event){ 
infoWindow.open(map,marker); 
console.log(event); // look in the console to find the position you need 
showPopUp(100,100, 'I m here :D', 5000); 
// then call the function showPopUp with the good args 
});

アニメーション

あなたはこのようなあなたのポップアップにかわいいアニメーションを追加することができます：あなたが行assignatio表示を削除hidePopUp showPopUpで今

#myPopUp { 
    top: -100vh, 
    position: absolute; 
    transform: translateX(-50%); 
    background-color: #FFF; 
    border: 1px solid #DEDEDE; 
    border-radius: 3px; 
    transition: top 0.3s; 
    z-index: 99; 
}

と。そして、あなたはこれをhidePopUpに追加：

myPopUp.style.top = '-100vh';

あなたは左のプロパティを使用するか、左/トップスタイルのデフォルト値を変更することで、アニメーションの方向を変更することができます。また、不透明で再生することも、高度なアニメーションを変換することもできます。

出典

2017-02-22 09:13:35 Kornflexx

うーん...なぜ何も表示されていないのですか？ –

おそらくZインデックス、私はそれをテストするつもりです。 – Kornflexx

私はいくつかのものを修正します（私の編集を見てください）。 javascriptコンソールでshowPopUp関数を呼び出すことができます：showPopUp（100,100、 'I m here：D'、5000）;それは私のために働いています。 – Kornflexx

HTML JSポップアップウインドウ（ウインドウ内）

答えて

関連する問題