JQUERY UI Modal Tutorial

Question

Bất cứ ai cũng có thể cung cấp một ví dụ rõ ràng về cách sử dụng hộp thoại Giao thức người dùng của JQUERY. Đáng ngạc nhiên là nó không đơn giản như bạn nghĩ.

Mục tiêu:

1. nhấp vào một yếu tố tải một phương thức

2. Các phương thức xuất hiện cho thấy "Loading ..." Và sau đó làm cho một cuộc gọi ajax để có được nội dung của phương thức

3. Phương thức có thể được đóng bằng cách nhấp vào btn gần hoặc bằng cách nhấn thoát

4. Phương thức có thể được mở lại và khi nó mở cửa trở lại, nó không hiển thị trạng thái của tương tác phương thức trước đó.

Cảm ơn!

Đây là những gì tôi hiện đang làm, nhưng nó hoạt động rất vụng về và dường như không giống như một giải pháp thông minh. Ý tưởng?

var $dialog = $('<div id="sharerdialog"></div>') 
.html('<p>Loading...</p>') 
.dialog({ 
    autoOpen: false, 
    title: 'Share the item', 
    position: ['center',150], 
    width: 450, 
    focus:function(event, ui) { 
     $('#dialogcloser').click(function() { 
      $dialog.dialog('close'); 
     }); 
    }, 
    open: function(event, ui) { 
     var title2use = document.title; 
     title2use = escape(title2use);   
     $("#sharerdialog").load("/items/ajax/share/index_beta.cfm?itemid=#itemID#&itemtitle=" + title2use); 
    } 
}); 
// Bind the Share btn to Open the Modal 
$('#itemshare').click(function() { 
    $dialog.dialog('open'); 
}); 

Answer 1

Vấn đề chính tôi thấy với mã của bạn là bạn không thêm hộp thoại vào DOM, do đó, trình duyệt sẽ không hiển thị. Đề xuất của tôi là bạn trước tiên hãy thử:

var $dialog = $('<div id="sharedialog"></div>') 
     .html('<p>Loading....</p>') 
     .appendTo('body') 
     .dialog({...}); 

Vì vậy, bạn đã thêm nó vào DOM và trình duyệt có thể hiển thị nó.

Answer 2

Tại sao quá phức tạp?

$(function() { 
    $("#itemshare").click(function() { 
     $("#sharerdialog").dialog().load("/items/ajax/share/index_beta.cfm"); 
     return false; 
    }); 
    }); 

Bạn có thể kết nối nó bằng jquery. Và trong HTML chỉ có div trống với id sharerdialog. Có thể phong cách nó ẩn

style="display: none;" 

Nhưng thats nó