javascript - 如何在加载器加载时停用后台

Question

我正在研究如何在页面上加载数据之前显示加载器。 我已经成功创建了加载器并且它的工作也很好，我被卡住的地方是加载器正在加载我想停用背景就像用户无法点击任何地方一样 这是我的片段

$('.loader').show();
$.ajax({
  url: "TestServlet",
  method: "GET",
  dataType: "json",
  contentType: "application/json; charset=utf-8",
  data: {
    fromdate: $("#startdate").val(),
    todate: $("#enddate").val(),
    outlet: $("#all").val()

  },

  success: function(tableValue) {

    console.log("test", tableValue);
    addTable(tableValue);

  },
  complete: function() {
    $('.loader').hide();
  }

});


function addTable(tableValue) {
  var col = Object.keys(tableValue[0]); // get all the keys from first

  var countNum = col.filter(i => !isNaN(i)).length; // count all which
  // are number
  var num = col.splice(0, countNum); // cut five elements from frist
  col = col.concat(num); // shift the first item to last
  // CREATE DYNAMIC TABLE.
  var table = document.createElement("table");

  // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

  var tr = table.insertRow(-1); // TABLE ROW.


  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];

    tr.appendChild(th);
  }

  // ADD JSON DATA TO THE TABLE AS ROWS.
  for (var i = 0; i < tableValue.length; i++) {

    tr = table.insertRow(-1);

    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      var tabledata = tableValue[i][col[j]];
      if (tabledata && !isNaN(tabledata)) {
        tabledata = parseInt(tabledata).toLocaleString('en-in')
      }
      tabCell.innerHTML = tabledata;

      if (j > 1)

        tabCell.classList.add("text-right");

    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
  var divContainer = document.getElementById("newTable");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");


}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<div class="loader"></div>

<div id="newTable"></div>

我在这里放了示例 JSON 所以如果有人想检查他们可以很容易地检查

  data = [
        {
            "amount": 476426,
            "billdate": "2018-09-01",
            "outlet": "JAYANAGAR"
          },
          {
            "amount": 92141,
            "billdate": "2018-09-01",
            "outlet": "MALLESHWARAM"
          },
          {
            "amount": 115313,
            "billdate": "2018-09-01",
            "outlet": "KOLAR"
          },
          {
            "amount": 511153,
            "billdate": "2018-09-02",
            "outlet": "JAYANAGAR"
          },
          {
            "amount": 115704,
            "billdate": "2018-09-02",
            "outlet": "MALLESHWARAM"
          },
          {
            "amount": 83597,
            "billdate": "2018-09-02",
            "outlet": "KOLAR"
          },
          {
            "amount": 167421,
            "billdate": "2018-09-03",
            "outlet": "JAYANAGAR"
          },
          {
            "amount": 53775,
            "billdate": "2018-09-03",
            "outlet": "KOLAR"
          },
          {
            "amount": 269712,
            "billdate": "2018-09-04",
            "outlet": "JAYANAGAR"
          },
          {
            "amount": 58850,
            "billdate": "2018-09-04",
            "outlet": "MALLESHWARAM"
          },
          {
            "amount": 82999,
            "billdate": "2018-09-04",
            "outlet": "KOLAR"
          }
        ]

我正在为此使用 j 查询隐藏和显示方法，成功调用后我将其隐藏。

我也想定位我的装载机中心

请有任何想法的人帮助我

Answer 1

你需要添加一个叠加层，我在这里发布了一个基本的答案，请试试这个。 您可以通过在 addTable 函数的最后调用 $('.overlay').hide(); 隐藏加载器

$('.loader').show();

   var tableValue = [
        {
            "amount": 476426,
            "billdate": "2018-09-01",
            "outlet": "JAYANAGAR"
          }
        ]
    addTable( tableValue );
		



function addTable(tableValue) {
	var col = Object.keys(tableValue[0]); // get all the keys from first
			
	var countNum = col.filter(i => !isNaN(i)).length; // count all which
														// are number
	var num = col.splice(0, countNum); // cut five elements from frist
	col = col.concat(num); // shift the first item to last
	// CREATE DYNAMIC TABLE.
	var table = document.createElement("table");

	// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

	var tr = table.insertRow(-1); // TABLE ROW.


	  for (var i = 0; i < col.length; i++) {
	    var th = document.createElement("th"); // TABLE HEADER.
	    th.innerHTML = col[i];
       
	    tr.appendChild(th);
	}

	// ADD JSON DATA TO THE TABLE AS ROWS.
	for (var i = 0; i < tableValue.length; i++) {

	    tr = table.insertRow(-1);

	    for (var j = 0; j < col.length; j++) {
	        var tabCell = tr.insertCell(-1);
	         var tabledata = tableValue[i][col[j]];
if(tabledata && !isNaN(tabledata)){
  tabledata = parseInt(tabledata).toLocaleString('en-in')
}
tabCell.innerHTML = tabledata;
          
          if (j > 1)
         
          tabCell.classList.add("text-right");
          
	    }
	}

	// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
	var divContainer = document.getElementById("newTable");
	divContainer.innerHTML = "";
	divContainer.appendChild(table);
	table.classList.add("table");
	 table.classList.add("table-striped");
	 table.classList.add("table-bordered");
	//$('.overlay').hide();
	}

.loader {
 position: absolute;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  
  
}
.overlay {
    background: #e9e9e9; 
          
    position: absolute;  
    top: 0;                
    right: 0;               
    bottom: 0;
    left: 0;
    opacity: 0.5;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<div class="overlay">
<div class="loader"></div>
</div>

  <div id="newTable"></div>