मेरे पास एक jQuery UI डायलॉग है जो विशिष्ट तत्वों को क्लिक करने पर प्रदर्शित होता है। मैं संवाद को बंद करना चाहूंगा अगर एक क्लिक उन ट्रिगर तत्वों या स्वयं संवाद के अलावा कहीं भी होता है।
यहाँ संवाद खोलने के लिए कोड है:
$(document).ready(function() {
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 50,
resizable: false,
width: 375
});
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html($hint.html());
$field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
/*$(document).click(function() {
$field_hint.dialog('close');
});*/
});यदि मैं पिछले भाग को अनसुना कर देता हूं, तो संवाद कभी खुलता नहीं है। मुझे लगता है कि ऐसा इसलिए है क्योंकि संवाद को खोलने वाला वही क्लिक उसे फिर से बंद कर रहा है।
अंतिम कार्य कोड
नोट: यह jQuery के बाहर की घटना प्लगइन का उपयोग कर रहा है
$(document).ready(function() {
// dialog element to .hint
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 0,
resizable: false,
width: 376
})
.bind('clickoutside', function(e) {
$target = $(e.target);
if (!$target.filter('.hint').length
&& !$target.filter('.hintclickicon').length) {
$field_hint.dialog('close');
}
});
// attach dialog element to .hint elements
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
$field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
// trigger .hint dialog with an anchor tag referencing the form element
$('.hintclickicon').click(function(e) {
e.preventDefault();
$($(this).get(0).hash + ' .hint').trigger('click');
});
});