Как я могу настроить окна оповещений для отображения как на мобильных устройствах, так и на рабочем столе из этого кода?

#javascript #alert

#javascript #предупреждение

Вопрос:

Я совсем новичок в JS и, хотя мне нравится, мне трудно получить правильный синтаксис.

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

Основная проблема связана с двумя частями кода, CSS здесь:

     #dialogbox {
  display: none;
  position: fixed;
  background: #0b6623;
  border-radius: 7px;
  width: 550px;
  z-index: 2001;
}

Во-первых, для диалогового окна установлено значение 550px, что нормально на большом экране. Реальная проблема возникает при запуске скрипта, который устанавливает положение диалогового окна:

 function CustomAlert(){
    this.render = function(dialog){
        let winW = window.innerWidth;
        let winH = window.innerHeight;
        let dialogoverlay = document.getElementById('dialogoverlay');
        let dialogbox = document.getElementById('dialogbox');
        dialogoverlay.style.display = "block";
        dialogoverlay.style.height = winH "px";
        dialogbox.style.left = (winW/2) - (550 * .5) "px";
        dialogbox.style.top = "100px";
        dialogbox.style.display = "block";
        document.getElementById('dialogboxhead').innerHTML = '<strong>Share your score to Facebook</strong>';
        document.getElementById('dialogboxbody').innerHTML = dialog;
        document.getElementById('dialogboxfoot').innerHTML = '<button class="btn btn-danger" onclick="Alert.ok()"><i class="far fa-times-circle"></i> Close</button>';
    }
    this.ok = function(){
        document.getElementById('dialogbox').style.display = "none";
        document.getElementById('dialogoverlay').style.display = "none";
    }
}
let Alert = new CustomAlert();

Там есть строки, которые устанавливают окно прямо в центр экрана.

Мой вопрос — мне все еще нужен центральный экран, но я хочу, чтобы диалоговое окно было плавным и уменьшалось до размера на мобильном телефоне. У кого-нибудь есть предложения о том, как это сделать с помощью этого CSS?

Полный сценарий доступен здесь: https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial

Большое спасибо 🙂

Ответ №1:

Хорошо, последняя попытка помочь здесь. Приведенный ниже пример кода ведет себя точно так же, как встроенные диалоговые окна оповещений браузера. Он помещает окно в середину, автоматически изменяет размеры в соответствии с содержимым, а все остальное на странице НЕДОСТУПНО для просмотра или редактирования, пока диалоговое окно не будет закрыто. Ну, я написал это некоторое время назад, и я не вижу никакой разницы. Он должен работать на любом устройстве, поэтому используйте его, меняйте, оформляйте так, как хотите. Обратите внимание на комментарии «НЕ ИЗМЕНЯТЬ». Изменение этого противоречит цели. Вам нужно JQuery.js так что скачайте последнюю версию здесь https://jquery.com/download /.

 <!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
    
    .main-container{
        display: flex;    /* DO NOT CHANGE */
        height: 100vh;    /* DO NOT CHANGE */
        width: 100%;      /* DO NOT CHANGE */
    }

    .c-message{
        display: flex;    /* DO NOT CHANGE */
        position: fixed;  /* DO NOT CHANGE */
        top: 0px;         /* DO NOT CHANGE */
        left: 0px;        /* DO NOT CHANGE */
        width: 100%;      /* DO NOT CHANGE */
        height: 100%;     /* DO NOT CHANGE */
    }

    .c-msgbox{
        padding: 30px;
        text-align: center;
        margin: auto; /* DO NOT CHANGE */
        background-color: #e4e4e4;
        border-radius: 4px;
        border: 1px solid #adadad;
        -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
        -moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);
    }

    .standerd-button2{
        border: none;
        font-family: arial,helvetica,clean,sans-serif;
        font-size: 10px;
        font-weight: 600;
        color: white;
        background: #1A709F;
        padding: 3px;
        text-align: center;
        vertical-align: middle;
        -webkit-border-radius: 3px;
        width: max-content;
        min-width: 50px;
        margin: 2px;
    }

    .standerd-button2:hover{
        background: crimson;
        cursor: defau<
    }

</style>
<script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
<div class="main-container">
    <div>
        <a id="ok" href="#">Normal Alert</a>
        <br>
        <a id="yn" href="#">Yes/No Alert</a>
    </div>
<div>
<script type="text/javascript">

    $.fn.CustomAlert = function (options, callback) {
        var settings = $.extend({
            message: null,
            detail: null,
            yesno: false,
            okaytext: null,
            yestext: null,
            notext: null
        }, options);

        var frm = "";
        detail = "<b>"   settings.detail   "</b>";
        message = "<b>"   settings.message   "</b>";
        if (settings.detail === null) {
            detail = "";
        };

        frm = frm   message   "<div style='text-align: left; margin-top: 15px; margin-bottom: 15px;'>"   detail   "</div>";

        if (settings.yesno === false) {
            frm = frm   "<input id='ok' type='button' value='"   settings.okaytext   "' class='standerd-button2' />";
        } else {
            frm = frm   "<div><input id='yes' type='button' value='"   settings.yestext   "' name='yes' class='standerd-button2' />"  
                        "<input id='no' type='button' value='"   settings.notext   "' name='no' class='standerd-button2' /></div>";
        };

        var frmesg = "<div id='cmessage' name='cmessage' class='c-message'>"  
                     "<div class='c-msgbox'>"  
                     "<form>"   frm   "</form>"  
                     "</div>"  
                     "</div>";

        $(".main-container").append(frmesg);

        if (!settings.yesno) {
            $("#cmessage #ok").click(function () {
                $("#cmessage").remove();
                callback(false);
            });
        } else {
            $("#cmessage #yes").click(function () {
                $("#cmessage").remove();
                callback(true);
            });
            $("#cmessage #no").click(function () {
                $("#cmessage").remove();
                callback(false);
            });
        };
    };

    $("#yn").click(function(){
        $().CustomAlert({message: "<div style='text-align: left;'><p><b>Confirmation Alert</b></p></div>",
                       yestext: "Yes",
                       notext: "No",
                       yesno: true},
                       function(success){
                           if (success) {
                               null;
                               // Do something
                           } else {
                               null;
                               // Do something else
                               
                       };
        });
    });

    $("#ok").click(function(){
        $().CustomAlert({message: "<div style='text-align: left;'><p><b>Bla bla bla</b></p></div>",
                       okaytext: "Continue",
                       yesno: false},
                       function(success){
                           if (success) {
                               null;
                               // Do something
                        
                       };
        });
    });    
</script>
</body>

1. Спасибо за это! Я обязательно буду использовать это в будущих проектах! Это отличный набор кода! Спасибо!

2. В любое время. С удовольствием.

3. Приятно иметь подтверждение, а также оповещение. Я хотел бы попробовать это в своем коде, но я не знаю jquery, поэтому немного зациклился на том, как мне поместить вызов функции в мой код?

Ответ №2:

Вы можете использовать медиа-запросы. При необходимости измените стиль вашего модального диалога на мобильных устройствах, планшетах и настольных компьютерах. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

 @media only screen and (min-width: 480px) {
 #dialogbox {
    /* your mobile styles */
  }
}

@media only screen and (min-width: 720px) {
 #dialogbox {
     /* your mobile styles */
  }
}

#dialogbox {
     /* your normal styles */
  }

1. Да, я думал сделать это таким образом, так что это имеет смысл. Я тоже использовал Bootstrap, поэтому я думал о способах превзойти его в Bootstrap, но я уже пробовал медиа-запросы раньше… но я думаю, что я еще раз к этому вернусь. Спасибо за совет.

2. О … подождите, я помню проблему… он не будет отображаться должным образом из-за JS. Я не уверен, как установить JS в тех же пропорциях, особенно в этой строке `dialogbox.style. left = (winW / 2) — (550 * .5) «px»; `

Ответ №3:

Я застрял с этой функцией в JS, но удалил одну строку и ее переменную:

 let winW = window.innerWidth;
    dialogbox.style.left = (winW/2) - (550 * .5) "px";

В CSS тоже были некоторые изменения:

 #dialogbox {
  display: none;
  position: fixed;
  margin-top: 17.5%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0b6623;
  border-radius: 7px;
  width: 67.7%;
  max-width: 550px;
  z-index: 2001;
}

Конечно, это не идеально, но это в 10 из 1000 раз лучше, чем раньше.

Для тех, кто задается вопросом, почему z-индекс 2001, потому что я использую bootstrap modals, и у них z-индекс 1040 или около того. И z-индекс 2000 заполняется белым наложением (см. Код в OP).

Ответ №4:

Это то, что я предлагаю, если я думаю, что вы хотите, правильно. Скопируйте это ниже и протестируйте. Если это не то, что вам нужно, извините, просто пытался помочь.

 <!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
    
*{
    margin: 0;
    padding: 0;
}

.main-container{
    display: flex;
    height: 100vh;
    width: 100%;
}

.dialogbox{
    display: flex; 
    margin: auto;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #adadad;
    -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
    -moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);    
}

.dialogbox .dialogtext{
    margin: auto;
}

</style>
</head>
<body>
<div class="main-container">
    <div class="dialogbox">
        <span class="dialogtext">
            <h3>Some text</h3>
        </span> 
    </div>  
<div>
</body>

Ответ №5:

Примечание: этот ответ стал несколько дискурсивным, с точки зрения ответа на заданный вопрос, использование CSS vw / vh и медиа-запросов, рекомендованных другими участниками, решит насущную проблему. Я оставил этот ответ здесь, хотя при обдумывании вопроса возникли дополнительные вопросы: «что мы пытаемся сделать с функцией оповещения?»

Функция оповещения в Javascript имеет некоторые характеристики, которые вы не можете эмулировать в своем собственном Javascript, но вы можете приблизиться.

Главное в оповещении заключается в том, что оно просто информирует пользователя независимо от того, что еще происходит, поэтому оно находится сверху. Он может «потеряться» в середине широкого окна, если окно частично скрыто за пределами экрана.

Хотя на большинстве мобильных устройств это немного лучше, потому что обычно, если ваш код запущен, окно будет хотя бы частично видно на экране.

На ваш непосредственный вопрос, лучший способ сделать окно оповещения видимым — использовать размеры окна просмотра плюс фиксированные (как вы сделали) — данный код использует размеры окна, и это просто не сработает во всех случаях — окно оповещения может быть далеко от экрана — дляпример, если окно представляет собой длинную прокрутку, которую просматривает пользователь.

Во-вторых, вы хотите, чтобы окно было видно выше всего остального, что находится в вашем окне, поэтому необходимо установить z-index в CSS на что-то большее, чем вы когда-либо будете использовать в остальной части вашего кода. (Кто-нибудь знает, будут ли все браузеры принимать Number.MAX_SAFE_INTEGER — для максимальной безопасности, хотя это было бы довольно экстремально)

В-третьих, вам нужно исправить окно оповещения в окне просмотра, чтобы пользователь не мог прокручивать его — вы хотите, чтобы пользователь ответил, чтобы вы знали, что он видел сообщение и не может полностью его игнорировать.

В-четвертых, вопрос о блокировке. Предупреждение JS делает это, но разумно ли использовать нашу собственную функцию для этого и / или полностью заменить собственное оповещение нашей собственной функцией. Вероятно, нет, в какой-то момент вы можете захотеть, чтобы реальное оповещение работало, поэтому, возможно, лучше оставить его в покое.

Замена окна.ширина с vw сделает окно отзывчивым, но оно может быть нечитаемым на маленьких экранах или недостаточно большим на огромных. К счастью, в CSS есть медиа-запросы, поэтому вы можете использовать их с точками останова при наиболее распространенных размерах экрана, чтобы определить ширину вашего окна оповещения (вам нужно, чтобы высота была прокручиваемой, поскольку вы не знаете, сколько информации должно отображаться).

Примечание: в приведенном ниже коде используются имена, отличные от исходного вопроса, чтобы избежать путаницы, поскольку использование некоторых элементов немного отличается.

Полностью переместив стиль и особенно решения о размерах в CSS, JS может стать чем-то вроде:

 function myAlert(alertMessage){
        document.getElementById('alertinfo').innerHTML = alertMessage;
        document.getElementById('alertoverlay').style.display = "block";
}
function myRemove(event) {
        event.preventDefault();
        event.stopPropagation();
        document.getElementById('alertoverlay').style.display = 'none';
}

CSS

 #alertoverlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999999;
    background-color: rgba(0,0,0,0.2);
    overflow: hidden;
    display: none;
}

#alertbox {
    font-family: Arial, Helvetica, sans-serif;
    width : 100vw;
    height: auto;
    overflow-y: auto;
    position: fixed;
    font-size: 10px; 
    background-color: white;
    text-align: center;
}

#alertheader {
    font-size: 3em;
}

#alertinfo {
    margin-top: 20px;
}

#alertokbox {
    width: 44px;
    height: 44px !important;
    float: right;
    margin: 10px;
    border-style: solid;
    border-radius: 10%;
    vertical-align: center;
}

#alertok {
    margin-top: 14px;
}

@media only screen and (min-width: 550px) {
  #alertbox {
    width: 550px;
    left: 50vw;
    margin-left: -275px;
    font-size: 16px;
  }
}

@media only screen and (min-width: 1600px) {
  #alertbox {
    width: 30vw;
    left: 50vw;
    margin-left: -15vw;
    font-size: 1vw;
  }
}

HTML

 <div id="alertoverlay">
  <div id="alertbox">
    <div id="alertheader">Alert</div>
    <div id="alertinfo"></div>
    <div id="alertokbox" onclick="myRemove(event);"></div>
    <div id="alertok">OK</div>
  </div>
</div>

Вы можете иметь столько мультимедийных «точек останова», сколько захотите — например, если вы кодируете для огромного экрана дисплея вплоть до самого маленького смартфона, вам нужно подумать о том, насколько большим вы хотите, чтобы ваш ящик был.

Для работы центрирования (настройки left и margin-left в CSS) вам нужно будет иметь окно оповещения в div, ширина которого равна ширине экрана — так что left: 0; right: 0;

 <!DOCTYPE html>
<html>
<head>
<style>
#alertoverlay {
    position: fixed;
    left: 0;
    top:0;
    bottom:0;
    right:0;
    z-index: 999999;
    background-color: rgba(0,0,0,0.2);
    overflow: hidden;
    display:none;
}

#alertbox {
    font-family: Arial, Helvetica, sans-serif;
    width : 100vw;
    height: auto;
    overflow-y: auto;
    position: fixed;
    font-size: 10px; 
    background-color:white;
    text-align:center;
}

#alertheader {
    font-size: 3em;
}

#alertinfo {
    margin-top: 20px;
}

#alertokbox {
    width:44px;
    height: 44px !important;
    float:right;
    margin: 10px;
    border-style: solid;
    border-radius: 10%;
    vertical-align:center;
}

#alertok {
    margin-top:14px;
}

@media only screen and (min-width: 550px) {
  #alertbox {
    width: 550px;
    left:50vw;
    margin-left:-275px;
    font-size: 16px;
  }
}

@media only screen and (min-width: 1600px) {
  #alertbox {
    width: 30vw;
    left: 50vw;
    margin-left: -15vw;
    font-size: 1vw;
  }
}

#application {
   width:2000px;
   height:2000px;
   background-color: white;
}
</style>
</head>
<body>
<div id="application">
  <button onclick="myAlert('Read this important message then click OK');">Click me to show an alert</button>
</div>

<div id="alertoverlay">
  <div id="alertbox">
    <div id="alertheader">Alert</div>
    <div id="alertinfo"></div>
    <div id="alertokbox" onclick="myRemove(event);"><div id="alertok">OK</div></div>
</div>
</div>


<script>

function myAlert(alertMessage){
        document.getElementById('alertinfo').innerHTML = alertMessage;
        document.getElementById('alertoverlay').style.display = "block";
}
function myRemove(event) {
        event.preventDefault();
        event.stopPropagation();
        document.getElementById('alertoverlay').style.display='none';
}

</script>
</body>
</html>

1. Я попробую это утром. Спасибо, что посмотрели на это. Это меня немного обеспокоило. Я думаю, у меня есть решение для большинства случаев… но я слышу, что вы говорите, я действительно не рассмотрел все возможности. Я дам вам знать примерно через 12 часов, если это сработает 🙂

2. У меня возникли сомнения по поводу размеров окна — я подумаю и вернусь к этому.

3. спасибо 🙂 — посмотрите, можете ли вы посмотреть этот учебник, на который я ссылался, потому что я думаю, что удаление наложения является ошибкой, и окно оповещения таким образом потеряет функциональность. Вы тоже видели мой ответ? Он работает и выглядит функциональным.

4. Извините, я не видел вашего ответа, когда печатал свой. Я не хотел избавляться от внешнего div — вы правы, вам это нужно (и, вероятно, это то, что я указывал в конце моего ответа). Я посмотрю на ваш код завтра — похоже, вы его взломали. Я должен был использовать vw / vh — не знаю, почему я этого не сделал во всех, кроме самых маленьких размеров экрана. Я протестирую.

5. Ваш ответ определенно решает большинство ваших проблем. Но он использует%s, поэтому, если приложение широкое (я кое-что делал с прокруткой гобелена Байе ….), окно оповещения будет располагаться в центре окна, а не в области просмотра (т. Е. Может быть вне поля зрения). Извините, я еще не пробовал это проверить. Я обновил свой ответ, который стал скорее дискурсивным ответом на экзаменационный вопрос, чем просто на ваш непосредственный вопрос, но он сохраняет оповещение в окне просмотра. И, очевидно, можно сделать больше стилей.

Ответ №6:

Хорошо. Эта часть является функцией

     $.fn.CustomAlert = function (options, callback) {
        var settings = $.extend({
            message: null,
            detail: null,
            yesno: false,
            okaytext: null,
            yestext: null,
            notext: null
        }, options);
     ....
     ....

Как вы можете видеть, для этого требуется несколько параметров. 1) Сообщение, которое будет центрировано. 2) Детали сообщения (необязательно, которые будут выровнены по левому краю. 3) yesno имеет значение true или false. True для диалогового окна подтверждения или false только для диалогового окна ok. 4) okaytext обычно «Okay» или «Continue», если yesno равно false. 5) yestext обычно означает «Да», если значение yesno равно true. 6) notext обычно означает «Нет, если значение yesno равно true.
Все они необязательны, но с небольшой логикой вы поймете, что и когда передавать.
Ниже приводится событие щелчка, а затем вызов функции.

     $("#yn").click(function(){
        $().CustomAlert({message: "<div style='text-align: left;'><p><b>Confirmation Alert</b></p></div>",
                       yestext: "Yes",
                       notext: "No",
                       yesno: true},
                       function(success){
                           if (success) {
                               null;
                               // Do something
                           } else {
                               null;
                               // Do something else
                               
                       };
        });
    });

$(«#yn»).click(function(){ // Это событие, когда нажимается этот якорь с идентификатором «yn». По параметрам вы также можете видеть, что это диалоговое окно подтверждения.
Имеет смысл?

Я рекомендую потратить немного времени на изучение jQuery. Это не так сложно и очень мощно. Это экономит много времени на написании кода. Мне потребовалось меньше дня, и это только из w3schoole. Попробуйте не использовать плагины и пользовательский интерфейс jQuery. Скорее напишите свои собственные плагины, как я. Весь этот код взят из моей библиотеки. Это просто помогает лучше понять это. Также я не рекомендую использовать bootstrap, не то чтобы в этом было что-то не так, но создание собственных таблиц стилей CSS3 дает вам то, что вы хотите. Это только мое мнение.

Ответ №7:

Используйте vh и vw. Это ширина и высота представления относительно окна браузера. Одна единица равна 1% от ширины или высоты браузера.

Используйте vh и vw, если вы хотите установить определенную ширину и высоту. Но я бы посоветовал разместить все ваше содержимое в главном div со стилем css "display: flex;" и вашим фактическим диалоговым окном (div), размер которого не указан, а просто со свойством css "margin: auto;" .

Это центрирует его и автоматически определяет размер в соответствии с вашим содержимым в поле. Но опять же, если вы хотите указать размер, вы все равно можете использовать vw и vh. Решать вам.

1. хорошо, звучит разумно. Я должен удалить эту строку JS dialogbox.style. left = (winW / 2) — (550 * .5) «px»; А затем? Должен ли я тогда просто использовать vh и vw в CSS?

2. @AHaworth спасибо за ответ. Это гораздо сложнее, чем я себе представлял. Я был так счастлив, когда нашел это руководство, а затем опустошен, когда обнаружил отсутствие отображения на мобильном устройстве. Есть идеи, что мне тогда делать?

3. Прошу прощения, я удалил свой первоначальный комментарий, который был неверным. vw / vh — это размеры области просмотра, не путать с окном браузера, поэтому ответ здесь полезен.