我希望能够在单击搜索按钮时显示叠加层。
我是 Jquery/JavaScript 的新手，根据我在 stack-overflow 和 google 上学到的知识，我能够想出以下代码:
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{
if($(".btn").data('clicked')){
displayOverlay("Loading...");
}
else{
$("#overlay").remove();
}
}<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">
<div class="panel-body">
<!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>
<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>
<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>
<div class="form-group">
<SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="cityFind">
<option value=#city#>#city#</option>
</cfoutput>
</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>
<div class="row">
<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select name="language" class="form-control" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option value=""></option>
<cfoutput query="Languages">
<option value=#Language#>#Language#</option>
</cfoutput>
</select>
<!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
<option disabled="disabled" selected="selected" value="">Language</option>
<option ng-repeat="l in Languages">{{l.Lang}}</option>
</select>--->
</div>
</div>
<div class="col-xs-6 no-left-padding">
<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>
</div>
</div>
<hr class="hrDoctor" />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<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>
<div class="input-group-addon">mi</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<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>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>--->
</form>
<!---</div><!---Progress bar--->--->
</div>
</div>但是，单击搜索按钮时不会出现叠加层。
更新
以下是调用正文时，并且在访问页面时出现叠加层，这是不需要的。
$(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...")
}
});
});
我仍然不明白当数据被检索并显示在屏幕上时如何进行回调以使覆盖消失
如有任何帮助，我们将不胜感激。 谢谢
最佳答案
您可以通过组合 div、css 和 js 更轻松地创建 html 用户交互阻止层。您只需使用此类来显示或隐藏 div 即可。我看不出有任何理由使用 table 。你的 div 就位于页面底部，里面什么也没有。 CSS 将其 float 在其他所有内容之上，并且它会扩展以覆盖所有内容。 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>
关于javascript - 单击“搜索”按钮时如何显示叠加层？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39045465/