固態窗口內的HTML JS彈出窗口

Question

每次點擊我的標記時，我都會嘗試創建類似彈出窗口的東西; 彈出窗口將在當前窗口內，但窗口的其余部分完全正常工作。

從這開始： 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>

Answer 1

使用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';
}

當您在標記上添加click事件時，您可以在回調參數中添加一個事件。 點擊（或標記）的位置應該在其中。

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

動畫

您可以在彈出窗口中添加漂亮的動畫，如下所示：

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

現在在showPopUp和hidePopUp中刪除顯示分配行。 然后你添加hidePopUp這個：

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

您可以使用left屬性或更改top / left樣式的默認值來更改動畫的方向。 您還可以使用不透明度或變換來播放高級動畫。

固態窗口內的HTML JS彈出窗口

問題描述

1 個解決方案

解決方案1
0 已采納 2017-02-22 09:13:35

固態窗口內的HTML JS彈出窗口

問題描述

1 個解決方案

解決方案1 0 已采納 2017-02-22 09:13:35

解決方案1
0 已采納 2017-02-22 09:13:35