Кнопка - свернуть модальные окна

После применения этого хака в модальных окнах появится кнопка - свернуть.


Установка:
1. Открыть любой JS файл шаблона и в самом конце добавить:

var _init = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function() {
    // инициализация библиотеки
    _init.apply(this, arguments);
 
    // установка некоторых переменных заранее
    var dialog_el = this;
    var dialog_id = this.uiDialogTitlebar.next().attr('id');
 
    //добавление иконки сворачивания окна
    this.uiDialogTitlebar.append('<a href="#" id="' + dialog_id + '-minbutton" class="ui-dialog-titlebar-minimize ui-corner-all">' + '<span class="ui-icon ui-hide">minimize</span></a>');
 
    //добавление состояния свернутых окон
    $('#dialog-minimized').append('<div class="dialog-minimized ui-widget ui-state-default ui-corner-all ui-state-hover" id="' + dialog_id + '_minimized">' + this.uiDialogTitlebar.find('.ui-dialog-title').text() + '<span class="ui-icon ui-active">newwin</span></div>');
 
    // создание события "hover" для кнопок сворачивания
    $('#'+dialog_id+'-minbutton').hover(function() {
        $(this).addClass('ui-state-hover');
    }, function() {
        $(this).removeClass('ui-state-hover');
    }).click(function(e) {
        dialog_el.close();
        e.preventDefault();
        $('#'+dialog_id+'_minimized').show();
    });
 
    // создание второго события по клику, которое разворачивает свернутое окно
    $('#'+dialog_id+'_minimized').click(function(e) {
        $(this).hide();
        dialog_el.open();
        e.preventDefault();
    });
}

2. Открыть engine.css шаблона и добавить:

#dialog-minimized{position:fixed;bottom:0px;left:5px;}
.ui-dialog .ui-dialog-titlebar-minimize{margin:-10px 0 0 0;padding:1px;position:absolute;right:2.3em;top:50%;width:16px;height:16px;}
.dialog-minimized{float:left;padding:5px 10px;font-size:12px;cursor:pointer;margin-right:2px;display:none;}
.dialog-minimized .ui-icon{display:inline-block !important;position:relative;cursor:pointer;}
.dialog-minimized span{margin:-10px 0 0 0;position:absolute;display:block;right:-5px;top:5px;width:16px;height:16px;}
.ui-hide {background-position: -64px -128px;}
.ui-active {background-position: -48px -82px;}
.ui-active:hover{opacity:0.6;}

3. Открыть main.tpl шаблона и найти:

</body>

Добавить выше:

<div id="dialog-minimized"></div>

3. Поправить стили под свой шаблон.

Готово! • Автор: denldv
• Модификация: SX2