0

Решил изменить размеры всплывающего окна в функции, порылся в интернете и решил, что можно сделать это при помощи конструкции

if (document.documentElement.clientWidth < 482) {...} else {...}

но окно в первом условии (< 482) осталось без изменений,тоесть растянуто на всю ширину экрана, а вторая часть условия отработала прекрасно и всплывающее окно получилось нужного размера, я также попробовал сделать это при помощи

(window.innerWidth < 482) и (document.body.clientWidth < 482) и ($(window).width() < 482)

еще пробовал поменять условия if и else местами, безрезультатно. Ошибок в консоли не обнаружено, вот сама функция:

function DLEalert(a, c) {
    $("#dlepopup").remove();
    $("body").append("<div id='dlepopup' class='dle-alert' title='" + c + "' style='display:none'>" + a + "</div>");

     if (document.documentElement.clientWidth < 482) { 
     $("#dlepopup").dialog({
        autoOpen: !0,
        width: 280,
        resizable: !1,
        dialogClass: "modalfixed dle-popup-alert",
        buttons: {
            Ok: function() {
                $(this).dialog("close");
                $("#dlepopup").remove()
            }
        }
    });}
    else {
         $("#dlepopup").dialog({
        autoOpen: !0,
        width: 450,
        resizable: !1,
        dialogClass: "modalfixed dle-popup-alert",
        buttons: {
            Ok: function() {
                $(this).dialog("close");
                $("#dlepopup").remove()
            }
        }
    });
    }

    $(".modalfixed.ui-dialog").css({
        position: "fixed"
    });
    $("#dlepopup").dialog("option", "position", ["0", "0"])

}

Подскажите, что неправильно делаю и как исправить?

  • Небольшое дополнение: если оставить только одно работающее условие (без if else) и поменять ширину на 100px то на экранах больше 600px popup будет 100px а если меньше 600px то окно растягивается по всей ширине экрана
4
  • Если ваш проект адаптивный, то можно брать ширину div-a обертки. Например ваш проект обернут в div c id="container", то var container = document.getElementById('container'); var containerWidth = container.offsetWidth; if (containerWidth < 482) { ... } else { ... }
    – Kydris
    28 июн 2018 в 14:28
  • Попробовал, не получилось, не могу понять в чем дело, но что-то перебивает эти параметры, и окно растягивается на всю ширину экрана в девайсах с экраном меньше 600px
    – Zin Me
    28 июн 2018 в 15:01
  • Тогда тут много вариантов, может скрипт принудительно растягивает, может стили принудительно растягивают, может в логику диалога это заложено. В общем нужно разбираться. Дайте ссылку на проект, если он онлайн.
    – Kydris
    29 июн 2018 в 6:29
  • Kydrid, вы правы, стили принудительно растягивали width 100% !important а я сразу не заметил, сейчас все работает как надо
    – Zin Me
    29 июн 2018 в 6:38

2 ответа 2

0

Эта конструкция:

document.documentElement.clientWidth

работает только в MS Internet Explorer

А вот window.innerWidth должна работать

2
  • Только что еще раз перепроверил с window.innerWidth, не меняеться размер, и заметил еще одну особенность, если проверять с размером экрана больше 600px то окно как и положено 450px в ширину, а если размер к примеру 533 и меньше (тестировал на реальном устройстве) то уже при 533 popup тянется на всю ширину экрана (хотя должен быть 450), может в этом причина? но немогу понять как это работает...
    – Zin Me
    27 июн 2018 в 16:32
  • Да, я думаю, дело в масштабировании экрана. Я бы добавил в расчёт ширину экрана (screen.width)
    – Confireus
    28 июн 2018 в 18:57
0

Нашел, что не давало возможности задать нужный размер в JS: в стилях для ui-dialog в @media{max-width:590px}было прописано width:100% !important и это имело больший приоритет чем значение в js, так что теперь все работает

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.