Javascript 禁用 Div 并弹出加载图标答案

【问题标题】：Javascript Disable Div and Pop A Loading IconJavascript 禁用 Div 并弹出加载图标
【发布时间】：2017-09-10 16:07:57
【问题描述】：

当您单击一个按钮，一个上传按钮时，我希望禁用我的屏幕并弹出一个加载图标，这样用户将无法访问表单按钮和所有内容，他们会知道他们的文件正在上传目前。

关于如何做的任何想法？提前致谢。

【问题讨论】：

尝试用谷歌搜索您的问题？ link1 link2等等......
去过那里。谷歌搜索一整天，对我没有任何帮助。所以，请。帮助我。
可能是this可以帮助你。

标签： javascript html jquery

【解决方案1】：

一个简单的想法就像你可以有一个简单的 div 有一些微调器， div 应该有 100% 的高度和宽度

检查我的 sn-p。

.spinftw {
                border-radius: 100%;
                display: inline-block;
                height: 30px;
                width: 30px;
                top: 50%;
                position: absolute;
                -webkit-animation: loader infinite 2s;
                -moz-animation: loader infinite 2s;
                animation: loader infinite 2s;
                box-shadow: 25px 25px #3498db, -25px 25px #c0392b, -25px -25px #f1c40f, 25px -25px #27ae60;
                background-size: contain;
                
            }

            @-webkit-keyframes loader {
                0%,
                100% {
                    box-shadow: 25px 25px #3498db, -25px 25px #c0392b, -25px -25px #f1c40f, 25px -25px #27ae60;
                }
                25% {
                    box-shadow: -25px 25px #3498db, -25px -25px #c0392b, 25px -25px #f1c40f, 25px 25px #27ae60;
                }
                50% {
                    box-shadow: -25px -25px #3498db, 25px -25px #c0392b, 25px 25px #f1c40f, -25px 25px #27ae60;
                }
                75% {
                    box-shadow: 25px -25px #3498db, 25px 25px #c0392b, -25px 25px #f1c40f, -25px -25px #27ae60;
                }
            }

            @-moz-keyframes loader {
                0%,
                100% {
                    box-shadow: 25px 25px #3498db, -25px 25px #c0392b, -25px -25px #f1c40f, 25px -25px #27ae60;
                }
                25% {
                    box-shadow: -25px 25px #3498db, -25px -25px #c0392b, 25px -25px #f1c40f, 25px 25px #27ae60;
                }
                50% {
                    box-shadow: -25px -25px #3498db, 25px -25px #c0392b, 25px 25px #f1c40f, -25px 25px #27ae60;
                }
                75% {
                    box-shadow: 25px -25px #3498db, 25px 25px #c0392b, -25px 25px #f1c40f, -25px -25px #27ae60;
                }
            }

            @keyframes loader {
                0%,
                100% {
                    box-shadow: 25px 25px #3498db, -25px 25px #c0392b, -25px -25px #f1c40f, 25px -25px #27ae60;
                }
                25% {
                    box-shadow: -25px 25px #3498db, -25px -25px #c0392b, 25px -25px #f1c40f, 25px 25px #27ae60;
                }
                50% {
                    box-shadow: -25px -25px #3498db, 25px -25px #c0392b, 25px 25px #f1c40f, -25px 25px #27ae60;
                }
                75% {
                    box-shadow: 25px -25px #3498db, 25px 25px #c0392b, -25px 25px #f1c40f, -25px -25px #27ae60;
                }
            }

            body {
                /*padding: 80px 0;*/
            }
            #CssLoader
            {
                
                text-align: center;
                height: 100%;
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: rgba(255,255,255 , 0.9);
                z-index: 9999;
            }

<div id="CssLoader">
            <div class='spinftw'></div>
        </div>

<div>
<input type="button" value="YOu cant click me till loader is there" name="button">
</div>

现在当你想显示这个加载器时，你可以简单地使用 jquery 像

$("#CssLoader").show();

这样，用户甚至无法访问他可以在屏幕上看到的任何内容。这只是一种 CSS 技巧。

你可以在任何你想要的地方打电话给$("#CssLoader").show();，就像你也可以像这样用ajax调用它。

$.ajax({
            url: 'yourURL',
            type: 'POST',
            data: data,
            dataType: 'JSON',
            beforeSend: function() {
                $('#CssLoader').show();
            },
            complete: function() {
                $('#CssLoader').hide();
            },
            success: function (data) { 
                     // code
            }
        });

【讨论】：

是什么让 div 被禁用？
加载器的 100% 高度和宽度不允许用户访问内容中的任何内容，
你在另一个上面做了一个 div 吗？
完全正确。 . . . ......这些只是一个CSS技巧，没有别的。好处是您可以随时随地调用它，甚至可以在页面完全加载之前使用它，您只需将其隐藏在准备好的 DOM 上。
对不起，我是新手。我对 js 真的很陌生。谢谢

【解决方案2】：

我们的代码如下：

简单验证 - 如果用户不输入数据，表单将不会提交
如果我们输入数据并提交，然后覆盖显示。用户不能在表单元素上click - 更高的z-index
按钮更改其状态 - 我们将输入值从“发送”更改为“处理中”
完成请求后，表单将重置为原始状态

检查工作示例。阅读我的 cmets 以获得更好的理解。

var ourForm = document.getElementById('form');
var formElements = ourForm.children;
var formOverlay = document.querySelector('.form-overlay')

function formSubmit() {

  // simple validation
  for (var i = 0; i < formElements.length; i++) {
    var formElement = formElements[i];
    
    if (formElement.type === 'submit') {
      var ourSubmitInput = formElement;
    }
    
    if (formElement.type === 'text' && formElement.value.length  === 0) {
      alert('Enter anything'); // our error alert
      return false; // exit form if validation is not passed
    }
  }
  
  // lets add overlay to our form
  formOverlay.style.display = 'block';
  
  // and lets change the value of submit Input/Button
  ourSubmitInput.value = 'processing...';

  // Here is our form ajax/xhr request...
  // code...
  

  // Lets pretend we are finishing xhr request after 1.5s
  setTimeout(function() {
    // back to previous state
    formOverlay.style.display = 'none';
    ourSubmitInput.value = 'Send'; 
    //reset our form
    ourForm.reset();
  }, 1500);
  
  


// prevent form from auto submitting
return false;
}

.form-container {
  padding: 20px;
  background: #ccc;
}
#form {
  padding: 40px;
  border: 1px solid black;
  position: relative; 
}

.form-overlay {
  display: none;
  position: absolute;
  width: 100%; 
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.5);
  z-index: 1;
}

<div class="form-container">
  <form id="form" onSubmit="return formSubmit();">
      <div class="form-overlay"></div>

      <h2>Our Form</h2>
      <input type="text" placeholder="type something so we can begin" />
      <input type="submit" value="Send" />

  </form>
</div>

【讨论】：

【解决方案3】：

我找到了答案。最后。

#loadp{
	background: #000;
	height: 100%;
	width: 100%;
}

#load {
	position:absolute;
	width:600px;
	height:36px;
	left:50%;
	top:40%;
	margin-left:-300px;
	overflow:visible;
	user-select:none;
	cursor:default;
}

#load div {
	position:absolute;
	width:20px;
	height:36px;
	opacity:0;
	font-family:Helvetica, Arial, sans-serif;
	animation:move 2s linear infinite;
	transform:rotate(180deg);
	color:#35C4F0;
}

#load div:nth-child(2) { animation-delay:0.2s; }
#load div:nth-child(3) { animation-delay:0.4s; }
#load div:nth-child(4) { animation-delay:0.6s; }
#load div:nth-child(5) { animation-delay:0.8s; }
#load div:nth-child(6) { animation-delay:1s; }
#load div:nth-child(7) { animation-delay:1.2s; }

@keyframes move {
	0% {
		left:0;
		opacity:0;
	}
	35% {
		left: 41%; 
		transform:rotate(0deg);
		opacity:1;
	}
	65% {
		left:59%; 
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		left:100%; 
		transform:rotate(-180deg);
		opacity:0;
	}
}

	<link href = "css/load.css" rel = "stylesheet" type="text/css"/>
	<script>
		$(document).ready(function(){
			$("#loadp").hide();
			$("#upload").click(function(){
				$(".cgnz").hide();
				$("#loadp").show();
			})
		});
	</script>
<div class = "cgnz">
//code here
</div>
	<div id = "loadp">
		<div id="load">
		  <div>G</div>
		  <div>N</div>
		  <div>I</div>
		  <div>D</div>
		  <div>A</div>
		  <div>O</div>
		  <div>L</div>
		</div>
	</div>

感谢回答的人

【讨论】：