點擊搜索按鈕時如何顯示疊加層？

Question

我希望能夠在單擊搜索按鈕時顯示疊加層。

我是新來的Jquery/JavaScript和基於什麼我學習上的堆溢出和谷歌，我能想出下面的代碼：

function displayOverlay(text) { 
 
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({ 
 
     "position": "fixed", 
 
     "top": "0px", 
 
     "left": "0px", 
 
     "width": "100%", 
 
     "height": "100%", 
 
     "background-color": "rgba(0,0,0,.6)", 
 
     "z-index": "10000", 
 
     "vertical-align": "middle", 
 
     "text-align": "center", 
 
     "color": "#fff", 
 
     "font-size": "40px", 
 
     "font-weight": "bold", 
 
     "cursor": "wait", 
 
    }).appendTo(".btn"); 
 
} 
 

 
function removeOverlay() { 
 
    $("#overlay").remove(); 
 
} 
 

 
function closeOverlay{ 
 
\t if($(".btn").data('clicked')){ 
 
\t \t displayOverlay("Loading..."); 
 
\t } 
 
\t else{ 
 
\t \t $("#overlay").remove(); 
 
\t } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script> 
 
<div class="panel panel-default"> 
 
\t <div class="panel-body"> 
 
<!--- \t <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar---> 
 
\t \t <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form"> 
 
\t \t \t <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div> 
 

 
\t \t \t <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div> 
 

 
\t \t \t <div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option> 
 
      <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div> 
 

 
\t \t \t <div class="form-group"> 
 
      <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> 
 
\t \t \t \t \t <option disabled="disabled" selected="selected" value="">City</option> 
 
\t \t \t \t \t \t <option value=""></option> 
 
\t \t \t \t \t \t <cfoutput query="cityFind"> 
 
          <option value=#city#>#city#</option> 
 
\t \t \t \t \t \t </cfoutput> 
 
\t \t \t \t \t </select> 
 
         
 
      <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>----> 
 
      </div> 
 

 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xs-6 no-right-padding paddingLanguage"> 
 
\t \t \t \t \t <div class="form-group widthLanguage"> 
 
       
 
         
 
        <select name="language" class="form-control" ng-model="searchParam.Language"> 
 
\t \t \t \t \t  <option disabled="disabled" selected="selected" value="">Language</option> 
 
         <option value=""></option> 
 
\t \t \t \t \t <cfoutput query="Languages"> 
 
\t \t \t \t \t \t <option value=#Language#>#Language#</option> 
 
\t \t \t \t \t \t </cfoutput> 
 
\t \t \t \t \t </select> 
 
         
 
         
 
         
 
\t \t \t \t \t <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language"> 
 
\t \t \t \t \t  <option disabled="disabled" selected="selected" value="">Language</option> 
 
\t \t \t \t \t  <option ng-repeat="l in Languages">{{l.Lang}}</option> 
 
\t \t \t \t  </select>---> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-xs-6 no-left-padding"> 
 
\t \t \t \t \t <div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender"> 
 
        <option disabled="disabled" selected="selected" value="">Gender</option> 
 
        <option value=""></option> 
 
        <option>Male</option><option>Female</option> </select></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <hr class="hrDoctor" /> 
 
\t \t \t <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> 
 
\t \t \t 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xs-7 no-right-padding"> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select> 
 

 
\t \t \t \t \t \t \t <div class="input-group-addon">mi</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-xs-5 no-left-padding widthZip"> 
 
\t \t \t \t \t <div class="form-group"><input allow-pattern="[\d\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" data-default=""/></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> 
 
\t \t \t <!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>---> 
 
\t \t </form> 
 
\t <!---</div><!---Progress bar--->---> 
 
\t </div> 
 
</div>

然而，當點擊搜索按鈕時，疊加層不會出現。

UPDATE

以下是當身體被調用，當頁面被訪問這是不希望出現的疊加。

$(function() { 
    $("body").click(function() { 
     if ($("#overlay").length > 0) { 
      removeOverlay(); 
     } else { 
      displayOverlay("Loading..."); 
     } 
    }); 
}); 

這是我調用的setTimeout（）函數的行：

<div class="form-group"><input class="btn btn-warning btn-block ignore" ng-click="gotoElement('SearchResultsAnchor');" onclick="setTimeout(overlayDisplayButton,3000)" type="submit" value="Search" /></div> 

我目前更新我做了什麼，這是我用來顯示疊加什麼：

function displayOverlay(text) { 
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({ 
     "position": "fixed", 
     "top": "0px", 
     "left": "0px", 
     "width": "100%", 
     "height": "100%", 
     "background-color": "rgba(0,0,0,.6)", 
     "z-index": "10000", 
     "vertical-align": "middle", 
     "text-align": "center", 
     "color": "#fff", 
     "font-size": "40px", 
     "font-weight": "bold", 
     "cursor": "wait", 
     "overflow-y":"hidden" 
    }).appendTo("body"); 
} 

function removeOverlay() { 
    $("#overlay").remove(); 
} 

$(function overlayDisplayButton() { 
    $(".btn").click(function() { 
     if ($("#overlay").length > 0) { 
      removeOverlay(); 
     } else { 
      displayOverlay("Loading..."); 
     } 
     displayOverlay("Loading..."); 
    }); 
}); 
</script> 

小的變化對我做了什麼

$(function overlayDisplayButton() { 
    $("#submit").click(function() { 
     if ($("#overlay").length > 0) { 
      removeOverlay(); 
     } else { 
      displayOverlay("Loading...") 
     } 
    }); 

}); 

，我還是不明白怎麼做回調，當數據被檢索並顯示在屏幕上，以便覆蓋消失

任何幫助將不勝感激。 謝謝

Answer 1

你可以創建一個html用戶交互阻擋層，只需要一個div和css和js的組合。你只需要顯示或隱藏這個類的div。我沒有看到有任何理由使用表格。您只需將該div放在頁面的底部，並不包含任何內容。 CSS懸停在一切之上，它擴展到覆蓋一切。 CSS的高度100％仍然需要js的一些幫助，因爲當我記得窗口改變大小時它不會自動調整。

css: 

div.BlockUserInteractionWithPage { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2000; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
    background-color: #ffffff; 
    opacity: 0.0; 
    filter: alpha(opacity=0); /* filter:alpha for IE8 and earlier */ 
    height: 100%; 
    width: 100%;  
} 

js: 

show 

var pageLength = document.body.clientHeight;   
var blockingLayerObject = $("#blockingLayer")[0]; 
blockingLayerObject.style.height=pageLength; 
$(blockingLayerObject).show(); 

hiding is easy of course, once it is hidden it is no longer blocking 

html: 

<div id="blockingLayer" class="BlockUserInteractionWithPage" style="display:none;"></div>