близко не диалог на JSFiddle

Question

Могу ли я попытался следующие на JSFiddle

HTML:

<div id="dialog" title="Basic dialog"> 
    <p>Hello.</p> 
</div> 

<a href="www.google.com">Link</a> 

JavaScript

$(document).ready(function() { 
    $("#dialog").dialog({ autoOpen: false }); 
    $(document.body).on('click',"a",function(event){ 
     event.preventDefault();   
     $("#dialog").dialog('open'); 
    }); 
}); 

Я не могу закрыть окно, когда я ударил кнопку закрытия. Почему это?

Answer 1

Вы открываете диалоговое окно, когда закрытие кликает до уровня документа. Диалоговое окно закрытия [x] равно <a>.

Добавьте эту строку в том, что «нажмите» обработчик, в самом начале:

if ($(this).hasClass('ui-dialog-titlebar-close')) return; 

В качестве альтернативы, вы можете сделать свой «открытый диалог» ссылка конкретнее, давая ему класс или что-то:

<a href=# class=open-dialog>Link</a> 

Тогда:

$('body').on('click', '.open-dialog', function(event) { 
     event.preventDefault(); 
     $('#dialog').dialog('open'); 
    }); 

делая ссылку, чтобы открыть диалоговое окно отличается от близкого Ь Уттон, вы обходите двусмысленность.

Answer 2

Вы должны определить ЗАКРЫТЬ функцию:

HTML

<div id="dialog" title="Basic dialog"> 
    <p>Hello.</p> 
</div> 

<a id="open" href="www.google.com">Link</a> 

JavaScript

$(document).ready(function() { 

    $("#dialog").dialog({ autoOpen: false }); 

    $(document.body).on('click',"#open",function(event){ 
     event.preventDefault();   
     $("#dialog").dialog('open'); 
    }); 

    $(document.body).on('click',".ui_icon_closethick",function(event){ 
     event.preventDefault();   
     $("#dialog").dialog('close'); 
    }); 
}); 

Рабочий раствор: http://jsfiddle.net/QTqUr/1/