Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы » Как сделать модальное окно быстрого редактирования на весь экран?

Как сделать модальное окно быстрого редактирования на весь экран?


     04.10.2016    Все вопросы » Общие вопросы    2635

вопрос
в dle_js.js есть код модального окна быстрого редактирования -

function ajax_prep_for_edit(a, b) {
    for (var c = 0, d = c_cache.length; c < d; c++) c in c_cache && (c_cache[c] || "" != c_cache[c]) && ajax_cancel_comm_edit(c);
    ShowLoading("");
    $.get(dle_root + "engine/ajax/editnews.php", {
        id: a,
        field: b,
        action: "edit"
    }, function(c) {
        HideLoading("");
        var d = "none";
        $("#modal-overlay").remove();
        $("body").prepend('<div id="modal-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #666666; opacity: .40;filter:Alpha(Opacity=40); z-index: 999; display:none;"></div>');
        $("#modal-overlay").css({
            filter: "alpha(opacity=40)"
        }).fadeIn();
        var g = {};
        g[dle_act_lang[3]] = function() {
            $(this).dialog("close")
        };
        g[dle_act_lang[4]] = function() {
            ajax_save_for_edit(a, b)
        };
        $("#dlepopup-news-edit").remove();
        $("body").prepend("<div id='dlepopup-news-edit' class='dlepopupnewsedit' title='" + menu_short + "' style='display:none'></div>");
        $(".dlepopupnewsedit").html("");
        $("#dlepopup-news-edit").dialog({
            autoOpen: !0,
            width: "800",
            height: 500,
            buttons: g,
            resizable: !1,
            dialogClass: "modalfixed",
            dragStart: function(a,
                c) {
                d = $(".modalfixed").css("box-shadow");
                $(".modalfixed").css("box-shadow", "none")
            },
            dragStop: function(a, c) {
                $(".modalfixed").css("box-shadow", d)
            },
            close: function(a, c) {
                $(this).dialog("destroy");
                $("#modal-overlay").fadeOut(function() {
                    $("#modal-overlay").remove()
                })
            }
        });
        830 < $(window).width() && 530 < $(window).height() && ($(".modalfixed.ui-dialog").css({
            position: "fixed"
        }), $("#dlepopup-news-edit").dialog("option", "position", ["0", "0"]));
        RunAjaxJS("dlepopup-news-edit", c)
    });
    return !1
}


width: "800",
height: 500


меняю на -
width: "100%",
height: "100%"


тогда ширина на весь экран а высоты вообще нету (~100px становится)

если сделать -
width: "100%",
height: 700


то больше становится и высота, но на весь экран не угадаешь выстоту...

-----
Так как же правильно сделать это модальное окно по верх всего на весь экран?

Ответил: irrwisch


у окон jqueryui высоту и ширину можно указать только в пикселях (у высоты ещё есть значение "auto", тогда значение будет подстраиваться под высоту контента). Читаем доки.
Как вариант можете сменить

width: "800",
height: 500

на

minWidth: "800",
minHeight: 500

и в css переопределить значение #dlepopup-news-edit

3 комментария

ПафНутиЙ
Админ

ПафНутиЙ - 4 октября 2016 13:36 -


.modalfixed {
min-height: 100vh;
}

Каков вопрос - таков и ответ. Просто помните об этом.

irrwisch
Юзер

irrwisch - 4 октября 2016 13:58 -

В таком варианте все модальные окна с данным классом будут иметь значение 100vh, а их штук 8-10

lutskboy
Эксперт

lutskboy - 4 октября 2016 14:55 -

тогда добавить еще один class

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх