JQuery Confirm how to change its height

Question

How can i change the height of Jquery Confirm dialog?

can i set it via parameters?

$.confirm({
    'title': 'Foo',
    'message': "Bar",
    'buttons': {
        'OK': {
            'class': ''
        }
    }
});

EDIT Following is Confirm code:

(function ($) {
    $.confirm = function (params) {
        if ($('#confirmOverlay').length) {
            return false;
        }
        var buttonHTML = '';
        $.each(params.buttons, function (name, obj) {
            buttonHTML += '<a href="#" class="uibutton large ' + obj['class'] + '">' + name + '<span></span></a>';
            if (!obj.action) {
                obj.action = function () { };
            }
        });

        $('body').append('<div id="confirmOverlay"></div><div id="confirmBox"><h1>' + params.title + '</h1><p>' + params.message + '</p><div id="confirmButtons">' + buttonHTML + '</div></div>');
        $('#confirmOverlay').css('opacity', 0.3).fadeIn(400, function () {
            $('#confirmBox').fadeIn(200);
        });
        var buttons = $('#confirmBox .uibutton');
        var i = 0;
        $.each(params.buttons, function (name, obj) {
            buttons.eq(i++).click(function () {
                obj.action();
                $.confirm.hide();
                return false;
            });
        });
    }

    $.confirm.hide = function () {

        $('#confirmBox').fadeOut(function () {
            $(this).remove();
            $('#confirmOverlay').fadeOut(function () {
                $(this).delay(50).remove();
            });
        });
    }
})(jQuery);

Answer 1

HTML

<div id="show">Show Dialog</div>
<div id='dialog'></div>

Javascript

var heightvalue = 300;

$('#show').click(function () {
        $('#dialog').dialog('option', 'title', 'Sample');
                $('#dialog').dialog('open');
            });

 $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        height: heightvalue,
        width: 380,
        buttons: [
        {
            text: 'Submit',
            click: function () {
            }
        },
        {
            text: 'Cancel',
            click: function () {
                $(this).dialog('close');
            }
        } ]
    });

You can it out HERE!

Answer 2

You can fix it with HTML, add an ID to the question div

<div class="dialog" id="question"><img src="question.png" alt="" /><span>Do you want to continue?</span></div>

and CSS :

#question {
        width: 300px!important;
        height: 60px!important;
        padding: 10px 0 0 10px;
    }

Answer 3

change this part inside js file;

 $(dialog).dialog({
            autoOpen: false,
            resizable: false,
            draggable: true,
            closeOnEscape: true,
            width: 'auto',
            minHeight: 120,
            maxHeight: 200,
            buttons: buttons,
            title: locale.title,
            closeText: locale.closeText,
            modal: true
        });

If you want to set manually, change code like this;

 $(dialog).dialog({
            autoOpen: false,
            resizable: false,
            draggable: true,
            closeOnEscape: true,
            width: 'auto',
            minHeight: options.minHeight,
            maxHeight: options.maxHeight,
            buttons: buttons,
            title: locale.title,
            closeText: locale.closeText,
            modal: true
        });

and set it like this;

$.confirm({
  'title': 'Foo',
  'message': "Bar",
  'minHeight': 100,
  'maxHeight': 200,
  'buttons': {
    'OK': {
        'class': ''
    }
  }
});