6

에 직접 링크는이 같은 URL을 가질 수 있습니까?부트 스트랩 모달 창

이 가능합니까? 어떤 힌트?
감사합니다.

+0

예 가능합니다. 그러나 그것은 왜 그리고 어떻게 링크를 사용 하느냐에 달려 있습니다. – Khamidulla

+0

방금 ​​몇 주 동안 단 하나의 준비 과정이 있었으며 다른 서비스의 제 인쇄물에 직접 링크해야합니다. 하지만 제 인쇄물은 미리 준비된 모달 창에 있습니다. 그것이 이유입니다;) – Marek123

답변

6

이와 같은 작업을 수행 할 수 있습니다.

if (window.location.hash == "#imprint") { 
    $('#myModal').modal('show'); 
} 
2

예 가능합니다. 그냥 URL을 확인 :

그냥 미래의 방문자/독자, 나는 당신이 찾고있는 정확한 ID를 알 필요없이 모달 동적으로를 엽니 다 아주 간단한 기능을 만들었습니다
function popModal() { 
     // code to pop up modal dialog 
    } 

    var hash = window.location.hash; 
    if (hash.substring(1) == 'modal1') { 
     popModal(); 
    } 
2

. 해시가 없으면 그냥 넘어집니다.

1

몇 시간 후에 나는이 것을 생각해 냈습니다. 페이지 -2에서 페이지 -1에서 클릭 한 링크를 기반으로 다른 모달을 여는 솔루션입니다. HTML 코드는 부트 스트랩 공식 모달 예제를 기반으로합니다.

HTML | 페이지 1.html

<body>  
    <a href="http://yourwebsi.te/page-2.html?showmodal=1"> 
    <a href="http://yourwebsi.te/page-2.html?showmodal=2"> 
</body> 

JS | ShowModal.js

$(document).ready(function() { 
    var url = window.location.href; 
    if (url.indexOf('?showmodal=1') != -1) { 
    $("#modal-1").modal('show'); 
    } 
    if (url.indexOf('?showmodal=2') != -1) { 
    $("#modal-2").modal('show'); 
    } 
}); 

HTML | page-2.html

<body>  
    <div class="modal fade bd-example-modal-lg" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content">Your content</div> 
    </div> 
    </div> 
    <div class="modal fade bd-example-modal-lg" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content">Your content</div> 
    </div> 
    </div> 
    <script src="ShowModal.js"></script> 
</body>