আমার কাছে একটি jQuery ইউআই ডায়ালগ রয়েছে যা নির্দিষ্ট উপাদানগুলিতে ক্লিক করা হলে প্রদর্শিত হয়। এই সংক্রামক উপাদানগুলি বা ডায়ালগটি ছাড়া অন্য কোনও জায়গায় যদি ক্লিক ঘটে তবে আমি ডায়ালগটি বন্ধ করতে চাই।
কথোপকথন খোলার কোড এখানে:
$(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');
});
});