如何在jQuery Dialog的主体中添加自定义html关闭按钮?

时间:2013-07-30 20:08:19

标签: jquery html jquery-ui onclick jquery-ui-dialog

类似问题:How to add my custom buttons with ids to a dialog-modal jquery object

我很好奇,如果有人知道如何使用我添加到.html正文的自定义按钮关闭我的jQuery对话框。我应该更改onClick值吗?什么?也许Virtual Escape Key是一个选项。我不想使用标题栏关闭或按钮窗格关闭,以便我可以保留我正在进行的主题。谢谢!

这就是我所拥有的:

<script>
$(function () {
    var $dialog = $('<div></div>')
    .html('')
    .dialog({
        autoOpen: false,
        modal: true,
        position: 'center',
        draggable: false,
                width:'40%';
    $(".ui-dialog-titlebar").hide()
    $("body").on('click', '#opener', function(e) {
        var param = $(this).attr('data-AttrRatingID');
    $dialog.html(param + "<br /><div id='modalClose' onclick='' class='formbtnshell' title='Close'><div class='formbtnwhtl'></div><div class='formbtnwhtr'></div><div class='formbtninside formbtninsidedelete'><div class='formbtntext'>Close</div></div></div>");
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });
});

1 个答案:

答案 0 :(得分:3)

只需在活动中分配点击事件和close对话框即可。避免使用内联事件处理程序。

$(document).on('click', '#modalClose', function() {
   $(dialogSelector).dialog('close');
});

<强>更新

你有一些问题,就像你创造小提琴一样。永远不要嵌套事件。它会多次绑定事件,但不会达到预期的效果。

您要将活动附加到 id =开启者 $("body").on('click', '#opener',

但是当你追加它时,元素的id是不同的

// Declare the initial dialog outside the Click event
var $dialog = $('#dialogg');

$dialog.dialog({
    autoOpen: false,
    modal: true,
    position: 'center',
    draggable: false,
    width: '40%',
    buttons: {
        "Close": function () {
            $(this).dialog("close")
        }
    }
});

// Append the HTML and open the dialog
$('input').click(function () {
    $dialog.html("<br /><a id='modalClose'>CloseMe</a>");
    $dialog.dialog('open');
});

// Bind the click event that closes the modal
$("body").on('click', '#modalClose', function (e) {
     // prevent the default action, e.g., following a link
     e.preventDefault();

     // Need to close the Modal
     $dialog.dialog('close');
});

Check Fiddle     $ dialog.html( “
CloseMe”);