JQUERY UI मॉडल ट्यूटोरियल

Question

कोई भी JQUERY के UI मॉडल संवाद का उपयोग करने का एक साफ उदाहरण प्रदान कर सकता है। आश्चर्य की बात है कि यह उतना आसान नहीं है जितना आप सोचेंगे।

लक्ष्य:

1. एक तत्व पर क्लिक लोड करता है एक मॉडल

2. मोडल दिखा प्रतीत होता है "लोड हो रहा है ..." और फिर मोडल की सामग्री को प्राप्त करने के लिए एक ajax कॉल करता है

3. मोडल को बंद बीटीएन पर क्लिक करके या भागने से दबाकर

4. मोडल को फिर से खोल दिया जा सकता है, और जब इसे फिर से खोल दिया जाता है तो यह पिछले मोडल इंटरैक्शन की स्थिति नहीं दिखाता है।

धन्यवाद!

यह वही है जो मैं वर्तमान में कर रहा हूं, लेकिन यह बहुत बेकार काम करता है और यह एक स्मार्ट समाधान की तरह नहीं लगता है। विचार?

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

मुख्य समस्या यह है कि मैं अपने कोड के साथ देखते हैं, कि आप डोम के लिए संवाद जोड़ने नहीं कर रहे हैं, इसलिए ब्राउज़र वह दिखाई नहीं देगा। मेरा सुझाव यह है कि आप पहले कोशिश करें:

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

ताकि आप इसे डोम में जोड़ सकें, और ब्राउज़र इसे प्रदर्शित कर सकता है।

Answer 2

इतना जटिल क्यों?

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

आप इसे jquery में जोड़ सकते हैं। और HTML में बस id sharerdialog के साथ एक खाली div है। शैली मई यह

style="display: none;" 

छिपा हुआ लेकिन यह thats