jquery - jquery uiダイアログの外に閉じるイメージボタンを配置する

Question

イメージを閉じるボタンをjquery uiダイアログの外に置きたいです。

これは私のコードです:

CSS:

 .Close
    {
        position:absolute;
        overflow:auto;
        height:25px;
        width:35px;
        right: -34px;
        top: 3px;
    }

これは Asp.NET コードです。

<div id="dialog" class="dialog ">
    <asp:ImageButton ID="btnCancelpopup" runat="server" ImageUrl="~/Images/quit.png" CssClass="Close"/>
</div>

これは JavaScript コードです。

$(function(){
$("#dialog").dialog({
            maxWidth: 600,
            maxHeight: 585,
            height: 450,
            width: 600,
            modal: true,
            autoOpen: false,
            resizable: false,
            show: "blind",
            hide: "explode",
            open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
        });
});

Answer 1

イベントを外部要素に手動でバインドできます。

$('#btnCancelpopup').click(function () {
     $('#dialog').dialog('close');
}