Question

我有一个用一个脉动点创建的演示页面。

https://diwuwudi.github.io/map-test/

目前，点击这个点时，会出现一个新页面。我想知道如何设置它，所以当用户点击点时，新页面会显示在弹出框中（有点像模态框）而不是新的窗口/标签？

非常感谢。

Answer 1

您可以使用此

＆＃13;

.map-bg {
    background: url(browse-map-Qld.jpg) no-repeat;
    background-position: 0px 0px;
    background-size: auto;
    width: 100%;
    height: 440px; /*adjust to the height of your image*/
    position: relative;
}

.marker {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 150px; /*positions our marker*/
    left: 170px; /*positions our marker*/
    display: block;
}

.pin {
    width: 20px;
    height: 20px;
    position: relative;
    top: 63px;
    left: 38px;
    background: rgba(5, 124, 255, 1);
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: 1000;
}

.pin-effect {
    width: 100px;
    height: 100px;
    position: relative;
    top: 0;
    display: block;
    background: rgba(5, 124, 255, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: pulsate 2400ms ease-out infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}
iframe {
    width: 100%;
    border: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

</head>
<body>
  <p>Test</p>
  <div class="map-bg">
    <div class="marker">
      <a href="javascript:void(0)"><button type="button" class="pin" data-toggle="modal" data-target="#myModal"></button></a>
      <div class="pin-effect"></div>
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <iframe src="https://en.wikipedia.org/"></iframe>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

＆＃13;

希望它对你有所帮助。

如何使用脉动点来调出一个模态盒子

1 个答案: