如何使用jQuery和CSS在同级div上打开div

问题描述

您好，我正在尝试为用户单击地图上的某个点提供一个更加友好的UI。我希望弹出按钮从div映射的底部垂直（从下到上）打开弹出窗口。这是在移动应用程序上，没有太多的工作空间。因此，我已经看到一些应用程序从地图底部打开了弹出信息，并用弹出信息覆盖了地图的1/3。

我在这里https://jsfiddle.net/5kdryesz/

创建了一个JSfiddle

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


  <!-- Bootstrap core JS-->
  <script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>

  <!-- Jquery JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

  <style>
    #map {
      height: 700px;
      width: 500px;
      background-color: rgb(52,58,64);
    }
    
    .popup {
      display: none;
      background-color: blueviolet;
      width: 500px;
    }
  </style>

</head>

<body>
  <div> Testing </div>
  <button id='popupbtn'> popup</button>
  <div class='container'>
    <div id='map'></div>
    <div id='popupdiv' class='popup'> Info This needs to go over Map div
      <br>phone: 324234
      <br>email: asdfsa@ssdf.sdf</div>
  </div>
  <div>
    testing and thinds
  </div>
</body>
<script>
  var map = L.map('map').setView([51.505,-0.09],13);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([51.5,-0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')


  $("#popupbtn").click(function() {
    $("#popupdiv").show("slide",{
      direction: "down"
    },600);

  })
</script>

</html>

我在理解位置css属性时遇到问题。我已经尝试过绝对模式，但无法弄清楚，我很好奇绝对模式是否适用于所有不同尺寸的手机。任何帮助表示赞赏。谢谢

解决方法

希望这对您有所帮助。

如果您使用position：absolute，那么您应该相对于其父div具有位置。

google map（.leaflet-bottom）的z-index值为1000，因此将我们的弹出窗口放置在地图上，我们应该具有更高的pop-up z-index值，因此我将z-index值1001放入了我们的弹出窗口。

innerHTML

var map = L.map('map').setView([51.505,-0.09],13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5,-0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')


$("#popupbtn").click(function(){
    $("#popupdiv").show("slide",{ direction: "down" },600);

})

我认为这就是您所需要的。我使用z-index将弹出式窗口放置在地图顶部，并使用固定位置将弹出式窗口放置在底部。

每个设备上弹出窗口的高度都相同：屏幕的30％。 with是固定的，因为地图的宽度是固定的，因此也是弹出窗口。

如果弹出窗口需要为地图高度的30％，则可以为绝对值。

var map = L.map('map').setView([51.505,{
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5,-0.09]).addTo(map)
  .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')


$("#popupbtn").click(function() {
  $("#popupdiv").show("slide",{
    direction: "down"
  },600);

})

#map {
  height: 700px;
  width: 500px;
  background-color: rgb(52,58,64);
  position: relative;
  z-index: 10;
}

.popup {
  display: none;
  background-color: blueviolet;
  width: 500px;
  height: 30vw;
  position: fixed;
  bottom: 0;
  z-index: 20;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div> Testing </div>
<button id='popupbtn'> popup</button>
<div class='container'>
  <div id='map'></div>
  <div id='popupdiv' class='popup'> Info This needs to go over Map div
    <br>phone: 324234
    <br>email: asdfsa@ssdf.sdf</div>
</div>
<div>
  testing and thinds
</div>

html

如何使用jQuery和CSS在同级div上打开div

问题描述

解决方法

相关问答