맥동 점을 사용하여 모달 상자를 표시하는 방법

나는이 데모 페이지를 하나의 맥동 점으로 만들었습니다.맥동 점을 사용하여 모달 상자를 표시하는 방법

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

현재 점을 클릭하면 새 페이지가 표시됩니다. 사용자가 점을 클릭 할 때 새 페이지가 새 창/탭 대신 팝업 상자 (모달 상자와 같은 종류)에 표시되도록 설정하는 방법이 궁금합니다.

대단히 감사합니다.

2017-10-26 Di Wu

는이

.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">&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>

가 당신을 위해 도움이 희망 사용할 수 있습니다.

출처

2017-10-26 06:20:54 Ezzuddin

예, 부트 스트랩 모달은 완벽한 솔루션입니다. 그는 팝업에서 URL을로드하려고합니다. 팝업에서 URL을 열도록 코드를 향상시킬 수 있습니까? –

좋아, 내가 그것을 업데이트하자. – Ezzuddin

CORS 문제로 인해이 기능이 더 이상 사용되지 않을 것으로 생각됩니다. –

맥동 점을 사용하여 모달 상자를 표시하는 방법

답변

관련 문제