Как запретить пользователю нажимать любую другую кнопку во время обновления страницы (часть из решения модального окна) - PullRequest
Новая
       10

Как запретить пользователю нажимать любую другую кнопку во время обновления страницы (часть из решения модального окна)

2 голосов
/ 29 ноября 2011

Я ищу решение, где в поле выбора, если пользователь выбирает элемент, страница обновляется обновленными данными. Это делается с помощью функции onChange.В то же время, если пользователь нажимает кнопку submit, а затем кнопку reset, все внесенные изменения были сброшены, поскольку после onChange.

не произошло подмены. Одним из решений, которое я думал, является вызов модального окна, когда onChange функция вызывается, но она требует много работы для обработки

Так что я смотрю, есть ли альтернатива этому

Ответы [ 2 ]

3 голосов
/ 29 ноября 2011

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

<div id="overlay"></div>

и добавить немного css: 

#overlay {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    opacity: 0.7;
    z-index:10;
    position:fixed;
    display:none;
}

Примечание: непрозрачность не работает в IE 8 и старше, но естьальтернативы, которые быстрый Google раскроет.

Затем в вашем onChange (при условии, что вы используете jQuery) просто поместите $ ('# overlay'). Show () или .fadeIn (), и либо скрывайте его по завершении, либо, если страница обновляется, нет необходимостиделать что-либо.

Если вы не хотите, чтобы что-то видимое убрало цвет фона и непрозрачность, и оно будет невидимым.

Я бы порекомендовал прикрепить загрузочный GIF в середине #overlay радиясности

Надеюсь, это поможет.

3 голосов
/ 29 ноября 2011

отключить кнопки в методе, который вызывается в onchange.Затем при загрузке страницы включите их обратно.

function onChangefunc()
{
  document.getElementById("button1").disabled = true;
  document.getElementById("button2").disabled = true;
  document.getElementById("button3").disabled = true;

  // do rest of your logic here  
}

Затем поместите это в конец страницы в теге: 

  <script>
  document.getElementById("button1").disabled = false;
  document.getElementById("button2").disabled = false;
  document.getElementById("button3").disabled = false;
  </script>
...