How to display overlay when Search button is clicked on?

Question

I would like to be able to display an overlay when the search button is clicked.

I am new to Jquery/JavaScript and based on what I am learning on stack-overflow and google, I was able to come up with the following code:

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>

However, the overlay does not appear when the search button is clicked on.

UPDATE

The following is when the body is called and the overlay appears when the page is visited which is not desired.

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

This is the line where I am calling the setTimeout() function:

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

I currently updated what I did and this is what I am using to display the overlay:

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

});

and I still don't understand how to do the callback when the data is retrieved and displays on the screen so that the overlay goes away

Any help would appreciated. Thanks

Answer 1

You can create an html user interaction blocking layer more easily with just a combo of a div and css and js. You just show or hide a div with this class. I don't see any reason to use a table. You just have that div sitting at the bottom of your page, with nothing in it. The css floats it above everything else and it expands to cover everything. The css height 100% still needs a little help from the js because it won't auto adjust when the window changes sizes I recall.

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>