如何显示叠加时，搜索按钮被点击
How to display overlay when Search button is clicked on?
我希望能够在单击搜索按钮时显示覆盖。
我是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>
Small Change on what I did
$(function overlayDisplayButton() {
$("#submit").click(function () {
if ($("#overlay").length > 0) {
removeOverlay();
} else {
displayOverlay("Loading...")
}
});
});
和我仍然不明白如何做回调时，数据被检索和显示在屏幕上，使覆盖消失
任何帮助将不胜感激。由于
你可以更容易地创建一个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>
相关文章：
- Magento上的搜索按钮损坏
- 搜索按钮谷歌地图在我的vf页面上不起作用
- jqgridnavgrid在搜索按钮和自定义按钮之后添加按钮
- 如何在第一次单击后禁用搜索按钮，直到结果来自服务器
- 将搜索按钮从一个站点复制到另一个站点:此搜索按钮如何工作，以及如何重现其操作
- 如何使用带有搜索按钮的Google Places API
- 如何获取ExtJs 4.1.1中的搜索按钮
- 允许在表刷新后键入数据表搜索按钮
- 按enter键不会通过p:defaultCommand点击预期的搜索按钮
- jqGrid不显示搜索按钮
- 在运行时按搜索按钮突出显示文本
- 如何显示弹出窗口以在使用纯 JavaScript 从 Web 服务器获取/请求数据时禁用搜索按钮
- Php 搜索表单显示结果时无需按搜索按钮，而它应该等到按下按钮才能显示它们
- 搜索按钮不起作用
- 当我点击网站上的搜索按钮时，滚动到特定的
或 标签
- 如何在Liferay搜索组件中获取搜索按钮的ID
- 通过输入键(不起作用）或搜索按钮(工作）查询结果
- 单击搜索按钮后如何显示搜索详细信息
- 带有搜索按钮的jQuery下拉框
- 如何在jquery移动中添加搜索按钮
