Все для DataLife Engine / DLE хаки / Хак для DLE / Кнопка свернуть модальные окно в Dle

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


В дле по умолчанию нет возможности свернуть в модальные окна, чтобы исправить эту ситуацию представляем хак «Кнопка свернуть модальные окно в Dle». После нескольких не больших правок, у вас будет кнопка свернуть в модальное окно.

Добавляем кнопку свернуть в модальные окна - этот хак для DLE потребует внести код в JS, CSS и TPL вашего шаблона DataLife Engine.

Итак! Установка хака

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>


Готово!

Все стили применялись на Default шаблоне! Так что, если что-то криво отображается правьте под себя!

Автор: denldv
Внес правки и подготовил мануал: SX2
Проверено на: DLE 10.4 значить можно использовать на dle 10.5

Скачать хаки дле другие вы можете у нас. как хак добавление кнопки свернуть в модальном окне информацию

Dobavlyaem-knopku-svernut-v-modalnye-okna-DLE.rar [42,61 Kb] (cкачиваний: 59)
  • 80
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent