Как отключить фон во время загрузки отображается

Я показываю загрузчик, когда пользователь нажимает кнопку. Ниже загрузчик классовКак отключить фон во время загрузки отображается

.loader-box{ background:rgba(0,0,0,0.8); position:fixed; bottom:0; left:0; top:0; width:100%; height:100%; z-index:100;}

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

источник

2017-02-08 C.jacking

Если вы не хотите удалить кнопку отправки/другие соответствующие элементы через дисплей: нет или аналогично, пока отображается ваш загрузчик - нет, это невозможно сделать с использованием только CSS. Вам понадобится JavaScript, который временно отключит эти элементы. – CBroe

Почему бы не отключить кнопки при отображении загрузчика. Или даже лучше сделать функцию, вызванную кнопкой, проверить, завершили ли вы загрузку до ее выполнения. –

@CBroe может u plz предложить код javascript, который отключит фон. –

Поместите свой загрузчик в DIV, который заполняет страницу:

#loaderParent{ 
position: fixed; 
width:100vw; 
height:100vh; 
}

Или, если у вас есть проблемы, чтобы показать/скрыть это Див сделать сам загрузчик заполнить страницу:

.loader-box{ 
    position: fixed; 
    width:100vw; 
    height:100vh; 
}

Чтобы предотвратить клавиатура:

$(document).keydown(function() { return false; });

и после замирания изменения загрузчика обратно:

$(document).keydown(function() { return true; });

Образец:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<input type="button" value="Test Tab" /> 
 
<input type="button" value="Test Tab" /> 
 
<input type="button" value="Test Tab" /><br><br> 
 
<input type="button" value="Disable KeyDown" onclick="DisableKeyDown()" /> 
 

 

 

 

 

 
<script> 
 
    function DisableKeyDown(){ 
 
     $(document).keydown(function() { return false; }); 
 
     } 
 
</script>

источник

2017-02-08 11:53:30

В большинстве случаев пользователь не будет нажимать - но это не будет препятствовать навигации на клавиатуре. – CBroe

* Моя проблема заключается в том, что загрузчик показывается, тогда пользователь может перемещать курсор, используя вкладки, и нажимать кнопку «Отправить» *, я не думаю, что он хочет навигация по клавиатуре, когда загрузчик работает. –

Я думаю, что «с помощью вкладок» означает «навигация по клавиатуре». – CBroe

Вы можете включить/отключить вход:

 $("#...").attr('disabled','disabled'); // disable 
    $("#...").removeAttr('disabled'); //enable

Пример:

http://jsfiddle.net/juvian/R95qu

источник

2017-02-08 11:57:20

Я отправлю пример, чтобы помочь u. Мы можем использовать атрибут «tabindex», чтобы сфокусировать элемент при использовании клавиши табуляции.

<div class="loader-box"> 
    <div class="formwrapper"> 
     <input type="text" name="name" tabindex="01" placeholder="text 01"> 
     <input type="text" name="name" tabindex="02" placeholder="text 02"> 
     <input type="text" name="name" tabindex="03" placeholder="text 03"> 
     <input type="button" name="button" tabindex="04" value="Submit"> 
    </div> 
</div> 

<style type="text/css"> 
    .loader-box { 
     background:rgba(0,0,0,0.8); 
     position:fixed; 
     bottom:0; 
     left:0; 
     top:0; 
     width:100%; 
     height:100%; 
     z-index:100; 
    } 
    .formwrapper { 
     font-family: arial; 
     width: 200px; 
     height: 200px; 
     margin:auto; 
     position:fixed; 
     bottom:0; 
     left:0; 
     top:0; 
     right: 0; 
     text-align: center; 
     color: #000; 
     background: #c1c1c1; 
     border-radius: 10px; 
    } 
    input { 
     padding: 5px; 
     width: 80%; 
     margin:8px 10px; 
    } 
</style>

источник

2017-02-08 12:05:04

Как отключить фон во время загрузки отображается

ответ

Смежные вопросы