cách tải trang bằng hộp thoại jquery ui

Question

có thể tải trang khác bằng hộp thoại jquery ui không?

Giống như Dialog + Ajax

Cảm ơn

Answer 1

Nếu bạn muốn tải nội dung vào một hộp thoại sử dụng Ajax, bạn có thể dễ dàng sử dụng $ .load:

// initialize dialog 
var dialog1 = $("#dialog").dialog({ autoOpen: false, 
    height: 600, 
    width: 350 
}); 

// load content and open dialog 
dialog1.load('path/to/otherPage').dialog('open'); 

Kiểm tra một ví dụ here.

Answer 2

Chắc chắn, chỉ bao gồm một khung nội tuyến trong HTML của hộp thoại của bạn.

Answer 3

Nếu bạn đặc biệt cần hoặc muốn một iFrame thay vì nội dung tiêm vào dom, tôi có một phần mở rộng cho rằng ở đây: http://plugins.jquery.com/project/jquery-framedialog

Answer 4

Thiết kế của hộp thoại JQuery UI là như vậy mà nó cần nội dung hiện có để vận hành trên . Thông thường trong các ví dụ, đây là số DIV được lấy từ số BODY hiện tại của DOM.

Có những trường hợp mặc dù việc thêm đánh dấu vào các trang hiện tại chỉ để tạo một hộp thoại - đặc biệt nếu nội dung được tải bởi AJAX - gây ra sự cố. Ví dụ, bạn có thể có một thư viện JavaScript có thể được gọi từ một số trang và không muốn thêm đánh dấu cho từng trang.

Một cách khác (inspired by this) là ở đây:

Sự khác biệt là bạn tạo DIV lập trình (sẽ được tự động thêm vào DOM) - và khi hộp thoại đóng lại, chúng tôi tiêu diệt nó hoàn toàn - và loại bỏ nó khỏi DOM về sự kiện 'đóng'.

function JQDialog(title, contentUrl, params) { 
    var dialog1 = $("<div>").dialog(
    { 
    autoOpen: false, 
    modal: true, 
    title: title, 
    close: function (e, ui) { $(this).remove(); }, 
    buttons: { "Ok": function() { $(this).dialog("close"); } } 
    }); 
    dialog1.load(contentUrl).dialog('open'); 
} 

---

Thay dialog1.load(contentUrl).dialog('open'); với những điều sau nếu bạn không muốn hộp thoại để mở (và có khả năng nhấp nháy) cho đến khi nội dung được tải. Điều này cũng sẽ cho phép nó được tập trung đúng cách mà không cần thêm công việc.

dialog1.load(contentUrl, function() { 
    $(this).dialog('open'); 
}); 

Answer 5

Tôi muốn đợi cho đến khi tôi có nội dung để tạo hộp thoại. Nó có vẻ đơn giản hơn với tôi. Ngoài ra, tính năng tự động định kích thước dường như không hoạt động nếu không:

$.ajax({ 
     'url': contentUrl, 
     'success': function success(data, textStatus, xhr) { 
      $("<div>" + data + "</div>").dialog({ 
       "width": "auto", 
       "height": "auto", 
       "close": function (e, ui) { $(this).remove(); } 
      }); 
     } 
    });