默認窗口內的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'; 
}

當您在標記上添加單擊事件時，可以在回調的參數中包含事件。點擊（或標記）的位置應該在其中。在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刪除顯示assignatio行：

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 
});

動畫

您可以非常動畫添加到您的彈出這樣。然後添加到hidePopUp此：

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

您可以通過使用留下的財產或通過改變頂部/左樣式默認值更改動畫的方向。您也可以玩不透明或轉換爲高級動畫。

來源

2017-02-22 09:13:35 Kornflexx

嗯......任何想法爲什麼它沒有顯示任何東西？ –

也許z-index，我會測試它。 – Kornflexx

我糾正了一些東西（看看我的編輯）。您可以在javascript控制檯中調用showPopUp函數：showPopUp（100,100，'我在這裏：D'，5000）;它爲我工作。 – Kornflexx

默認窗口內的HTML JS彈出窗口

回答

相關問題