Cách hiển thị URL trong hộp thoại Bootstrap Modal: Trên nút bấm

Question

Tôi phải tải một trang (URL nội bộ) trong một cửa sổ phương thức. Tôi đã được sử dụng window.showModalDialog (url, null, tính năng) nhưng điều này không hoạt động đúng trên Safari, Chrome. Vì vậy, chúng tôi quyết định sử dụng hộp thoại phương thức của Bootstrap để thay thế. Tôi không thể thực hiện công việc này. Bất kỳ ý tưởng những gì tôi có thể làm sai?

//imports 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 


    //activate content as modal 
     $(document).ready(function(){ 
      $('#test_modal').modal({ 

       }); 
    } 

    ....... 
    ....... 

    $("#btnSubmit").click(function(){ 
    var url = constructRequestURL(); 
     $('#test_modal').modal(data-remote=url,data-show="true"); 
    }); 


    ----- 
    ----- 
    <div class="modal fade" id="test_modal"> 
</div> 

Answer 1

Nếu bạn đang đi để tiếp tục xuống con đường bootstrap, bạn có thể có một cái nhìn ở đây: jsfiddle - remote URI in Bootstrap 2.3.2 modal

Lưu ý rằng URL sẽ cần phải được trên cùng một tên miền (mặc dù bạn đề cập đến nó là " nội bộ ") hoặc tên miền của bạn sẽ cần được cho phép bởi cài đặt Access-Control-Allow-Origin của trang web từ xa. Vì vậy, hãy nhớ rằng bản trình diễn fiddle không thể tải nội dung từ example.com.

<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button> 

<div id="myModal" class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> 
     <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <!-- remote content will be inserted here via jQuery load() --> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div> 

Bạn không cần phải viết bất kỳ JavaScript tùy chỉnh nào cho điều này - Bootstrap sẽ biết phải làm gì dựa trên các thuộc tính dữ liệu như data-remote = "http://example.com/whatever" và dữ liệu -target = "# myModal" vv

Xem phần liên quan của Bootstrap modal docs để biết thêm ...

Edit: nó chỉ ra rằng việc thay đổi URL từ xa tự động là không dễ dàng như nó có thể là. Hy vọng rằng this answer sẽ giúp bạn thêm.

Answer 2

Hoặc bạn có thể sử dụng hộp ưa thích. Đơn giản và sạch sẽ của nó.

Hãy xem ở đây: http://fancyapps.com/fancybox/3/docs/#ajax

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;"> 
AJAX content