このデモページは1つの脈動ドットで作成しました。脈動ドットを使用してモーダルボックスを表示する方法
https://diwuwudi.github.io/map-test/。
現在、ドットをクリックすると、新しいページが表示されます。私はどのようにユーザーがドットをクリックすると、新しいページが新しいウィンドウ/タブの代わりにポップアップボックス（モーダルボックスのようなもの）で表示されるように設定するのだろうか？
ありがとうございました。
あなたはこの
.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;
}<!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">×</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>が、それはあなたのために役立ちます願って使用することができます。
はい、ブートストラップモーダルは完璧なソリューションです。彼はポップアップでURLを読み込みたいのですが、ポップアップでURLを開くようにコードを拡張できますか？ –
さて、それを更新させてください – Ezzuddin
この機能はCORSの問題のために廃止されたと思います。 –