Load dialogue before loading the page

Is there a way to display a dialog box without using the dialog ui to show error events on a web page?

<div id="downloadcredit" style="width:100%;position:fixed;height:100%;min-height:overflow:hidden;background-color:rgba(127,127,127,0.4);display:none;" >
<div style="text-align:right;width:466px;position:absolute;left:0;right:0;height:337px;min-height:overflow:hidden;background:url(images/creditbase.png);color:black;margin-left:auto;margin-right:auto;top:200px;font:16px behzad;">
<div style="width:100%;height:40px;background:transparent;font:20px behzad;padding-top:8px;color:#818181;text-align:center;"><span style="float:right;font:12px tahoma;font-weight:bold;color:#75797A;margin-right:15px;cursor:pointer;margin-top:6px;" onclick="$('#downloadcredit').slideUp('slow');">X</span></div>

<div style="margin:175px auto 10px;width:95%;font:11px tahoma;text-align:center;color:white;line-height:165%;">

<p> Error Sample ...
</div>
</div>
</div>
<body onload="$('#downloadcredit').slideDown('1000');">

However, my page is slow loading and the dialog only appears 3 or 4 seconds after the page has completely loaded. Is there a way to prioritize displaying the dialog first while letting the page load in the background?

javascriptjqueryhtmlcss

Answer №1

My usual approach is to hide the target container by applying the style "display:none". Then, I use the .load() function along with a callback to display the container filled with data.

Here's how I typically do it:

$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('data.php',function(){
    $('#target').removeClass("loading-layer");
    $('#target').show();
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Revive the design of a website

As I work on creating my own homepage, I came across someone else's page that I really liked. I decided to download the page source and open it locally in my browser. However, I noticed that while the contents were all there, the style (frames, positi ...

javascripthtmlcss

Retrieve all the data enclosed within the span tags

Assuming there are two instances of tbody on a given page, is it possible to retrieve all the data enclosed within the spans of the second occurrence of tbody as shown below? The unique id's (id=id1, id=id2, etc) can only be found once throughout the ...

javascriptnode.jscheerio

Changing the src attribute of an <img> tag using Jquery seems to be unresponsive

Hey everyone, I created a simple slider using JqueryUI. When the value falls within a certain range, I generate an Image URL and then attempt to change the src attribute. I am attempting to modify four images. You can view the jsFiddle here. I believe t ...

javascriptjqueryhtmlcssjquery-ui

Using PHP to display a message box and redirecting to a different webpage

Currently, I am working on developing a login page using PHP. When the user enters an incorrect username/password combination, I display a JavaScript alert box to notify them. However, after clicking the "OK" button on the alert box, I want to redirect t ...

javascriptphp

"Implementing a consistent body border design on all pages using CSS for print media

Having an issue with my html page layout where I am unable to display a border on both printable pages. My current code only adds the border to the first page. Any suggestions on what I need to change in order to show the border on every printed page? Be ...

htmlcssprinting

Deleting a row from the table with a single click on the X icon

Is there a way to delete individual rows in a table by clicking on a close icon instead of removing all rows at once? Additionally, I am looking for a better method to display rows in a table. You can view my current implementation here: link -> jsfiddl ...

javascriptjqueryhtml

What is the best way to arrange an array or display it accurately?

Guys, here's a challenge for you: extract the values from this JSON data: [[name, brand, oem, category], [name, brand, oem, category], [name, brand, oem, category], [name, brand, oem, category]] Check out my JavaScript code: $(function(){ $('i ...

javascriptjquery

What steps can I take to ensure these three images all have identical height and width?

Just starting out with Bootstrap 4 and I have a question about making images inside a card the same height and width. Can anyone help me figure out which div to input an attribute to achieve this? Here's the HTML code below the image: <link href ...

cssbootstrap-4

AngularJS HTML template language is a powerful tool for creating dynamic web

Having transitioned from Rails to Angularjs, I am comfortable with Sass and have quickly adapted to Less. Now, I am interested in exploring options for HTML and possibly JavaScript as well. Is there a templating language similar to SLIM for projects ...

javascriptruby-on-railsangularjscoffeescriptslim-lang

Why does Javascript Tic-Tac-Toe delay notifying the user until the entire board is full?

There have been a lot of questions about Tic-Tac-Toe javascript, but my issue is unique. My code works fine, but it doesn't declare a winner or a tie game until the entire board is filled. I suspect that my if statements are causing problems and can&a ...

javascripthtmlcssdom

Creating a grid layout: Is there a way to instruct the renderer to disregard any additional tags in between

I have been setting up a grid layout with some divs, following this structure: CSS .grid { width: 300px; display: grid; grid-template-columns: 50% 50%; } HTML <div class="grid"> <div>First cell</div> <div>Second cell&l ...

htmlangularcssgrid-layout

What is the method for generating a random Vector3 inside a sphere?

Recently, I've been experimenting with creating a random point within a sphere. However, I seem to be struggling in getting it right. The current code I have written actually returns a point within a cube instead of a sphere. I suspect there might be ...

javascriptthree.js

Maximizing the Efficiency of jQuery and Javascript Frameworks

Currently, I am working on a project that involves utilizing a JavaScript framework (jQuery) in conjunction with various plugins (validation, jquery-ui, datepicker, facebox, and more) to enhance the functionality of a modern web application. However, I ha ...

javascriptjqueryoptimizationlatencyjavascript-framework

Oops! Issue: The mat-form-field is missing a MatFormFieldControl when referencing the API guide

I included the MatFormFieldModule in my code like so: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; ...

javascriptangulartypescriptangular-materialangular-material-8

The TypeScript datatype 'string | null' cannot be assigned to the datatype 'string'

Within this excerpt, I've encountered the following error: Type 'string | null' cannot be assigned to type 'string'. Type 'null' cannot be assigned to type 'string'. TS2322 async function FetchSpecificCoinBy ...

javascriptnode.jstypescript

Altering value with Angular in a script element

Is there a way to dynamically change the radius of a circle based on user input without using angular curly braces in the script tag? I'm looking for an alternative method that mimics how Angular binds HTML properties. <script src="https://aj ...

javascriptjqueryangularjsweb

Problem encountered when incorporating PHP code into HTML

I have a PHP forum and an HTML website that I am trying to merge for a cohesive appearance. However, I have encountered an issue when attempting to integrate the PHP code into the HTML file. Despite using the following code: <?php echo "here goes my P ...

phphtmlvs-web-site-project

React JS implementation of Dropbox logic with multiple steps

Greetings to you and your loved ones. I am in need of your assistance with a minor issue that has been eluding me for the past three days. I have been utilizing a basic React library for the following scenario: Scenario I have set up 4 dropdown menus: I ...

javascriptreactjsreact-nativereact-hooksscripting

The error in ReactJS is coming from the render method of the `News` component

While working with React JS, I encountered an error when trying to run a particular code snippet. The error message displayed was: "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got ...

javascriptnode.jsreactjs

Connecting PHP modules for AJAX requests: a guide to linking files in PHP

If I have a file structure like the following: / index.php // contains database connection, login details, ... ... /someSubSite content_someSite.html // basic layout, text, forms, ... styles_someSite.css // styling for cont ...

phpjqueryajaxpdoconcept