当点击搜索按钮时如何显示叠加层？

Question

当点击搜索按钮时如何显示叠加层？

3

我希望能够在单击搜索按钮时显示覆盖层。

我是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>

然而，当点击搜索按钮时，覆盖层不会出现。

更新

当调用body并访问页面时，覆盖层会出现，这并不是所期望的。

$(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...")
        }
    });

});

我仍然不明白如何在数据检索并显示在屏幕上时进行回调，以便覆盖物消失。

如果有帮助，将不胜感激。谢谢！

- Roberto Flores

1

你正在将HTML附加到输入中吗？ - epascarello

@epascarello 是的。如果是这种情况，那么我现在的做法是错误的吗？ - Roberto Flores

输入没有子元素，因此您不应将其附加到输入。 - epascarello

@epascarello 好的。最初它是附加到主体上的，这很有效，但我想能够单击搜索按钮并在单击时显示叠加层。 - Roberto Flores

1

那为什么它要在页面加载时被调用呢？应该是在点击事件触发时调用。 - epascarello

显示剩余14条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- javaMoca · Answer 1

你可以通过使用 div、CSS 和 JS 的组合更轻松地创建 HTML 用户交互屏蔽层。你只需显示或隐藏带有此类的 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>