6

Có thể có một địa chỉ như thế này:Bootstrap - liên kết trực tiếp đến cửa sổ modal

www.url.com/#imprint
(hoặc tương tự) để liên kết trực tiếp đến trang web với các cửa sổ modal mở?

là điều này có thể? Bất kỳ gợi ý nào?
Cảm ơn bạn!

+0

Có thể thực hiện được. Nhưng nó phụ thuộc vào lý do tại sao và cách bạn muốn sử dụng liên kết. – Khamidulla

+0

Tôi chỉ có một đơn đăng ký cho một vài tuần và tôi cần liên kết trực tiếp với chi nhánh nhà xuất bản của tôi từ các dịch vụ khác. Nhưng Imprint của tôi đang ở trong một cửa sổ phương thức trên prepage. Đó là lý do tại sao;) – Marek123

Trả lời

6

Bạn có thể làm điều gì đó như thế này.

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

Có thể thực hiện được. Chỉ cần kiểm tra URL:

function popModal() { 
     // code to pop up modal dialog 
    } 

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

chỉ dành cho du khách trong tương lai/độc giả, tôi đã tạo ra một chức năng rất đơn giản để mở một phương thức động mà không cần phải biết ID chính xác mà bạn đang tìm kiếm. Nó chỉ rơi qua nếu không có băm nằm.

/** 
* Function to open a bootstrap modal based on ID 
* @param int 
*/ 
function directLinkModal(hash) { 
    $(hash).modal('show'); 
} 

/** 
* Call the function on window load 
* @param hash of the window 
*/ 
directLinkModal(window.location.hash); 
1

Sau khi mất vài giờ tôi đã đưa ra điều này. Giải pháp để mở các phương thức khác nhau tại page-2 dựa trên liên kết được nhấp vào page-1. Mã HTML dựa trên các ví dụ chính thức của Bootstrap.

HTML | page-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> 
Các vấn đề liên quan