Добавить кнопку в диалоговое окно jQuery ui

Я не могу добавить кнопку в этот диалог jQuery ui. если возможно, приведите пример . спасибо.

<script type="text/javascript">
    $(document).ready(function () {
        //setup new person dialog
        $('#dialog2').dialog({
            autoResize: true,
            show: "clip",
            hide: "clip",
            height: 'auto',
            width: '1000',
            autoOpen: false,
            modal: true,
            position: 'top',
            draggable: false,
            title: "انتخاب درخواست",
            open: function (type, data) {
                $(this).parent().appendTo("form");
            }
        });

        $('#viewfaktor').dialog({
            autoResize: true,
            show: "clip",
            hide: "clip",
            height: 'auto',
            width: '1000',
            autoOpen: false,
            modal: true,
            position: 'top',
            draggable: true,
            title: "مشاهده صورت ریز",
            open: function (type, data) {
                $(this).parent().appendTo("form");
            }
        });


        $('#msgBox').dialog({


            autoResize: true,
            show: "clip",
            hide: "clip",
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            position: 'center',
            draggable: false,



            open: function (type, data) {
                $(this).parent().appendTo("form");
            }


        });



    });

    function showDialog(id) {
        $('#' + id).dialog("open");
    }

    function closeDialog(id) {
        $('#' + id).dialog("destroy");
    }



</script>
15
jquery jquery-ui jquery-ui-dialog

4 ответов

$('#msgBox').dialog({
    autoResize: true,
    show: "clip",
    hide: "clip",
    height: 'auto',
    width: 'auto',
    autoOpen: false,
    modal: true,
    position: 'center',
    draggable: false,

    open: function (type, data) {
        $(this).parent().appendTo("form");
    },

    buttons: { "OK": function() { $(this).dialog("close"); } } 
});
23

иногда вы хотите добавить кнопки динамически после создания диалога. Смотрите мой ответ на вопрос добавить кнопку в диалоговое окно динамически

var mydialog = ... result of jqueryui .dialog()
var buttons = mydialog.dialog("option", "buttons"); // getter
$.extend(buttons, { foo: function () { alert('foo'); } });
mydialog.dialog("option", "buttons", buttons); // setter
25

Если вы хотите добавить кнопку в диалоговое окно, которое уже открыто, вы можете сделать что-то вроде:

var buttonSet = $('#dialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>My New Button</button>');
newButton.button().click(function () {
    alert('My new button clicked');
});
buttonSet.append(newButton);
11

вот пример

добавьте это в свою функцию:

buttons: {
                OK: function() { //submit
                    $( this ).dialog( "close" );
                },
                Cancel: function() { //cancel
                    $( this ).dialog( "close" );
                }
            }

Итак, вы получаете 

    $('#msgBox').dialog({


                autoResize: true,
                show: "clip",
                hide: "clip",
                height: 'auto',
                width: 'auto',
                autoOpen: false,
                modal: true,
                position: 'center',
                draggable: false,
                buttons: {
                OK: function() { //ok
                    $( this ).dialog( "close" );
                },
                Cancel: function() { //cancel
                    $( this ).dialog( "close" );
                }
            }
                open: function (type, data) {
                    $(this).parent().appendTo("form");
                }


            });
6