Click the button to trigger a loading popup, followed by a change in the text displayed on

Question

Click the button to trigger a loading popup, followed by a change in the text displayed on

I have a button that triggers a popup box when clicked. However, I want to add a loading circle with text underneath before the popup appears, and for it to display after 3 seconds. Is this doable?

Here is my current code snippet:

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<div class="btn">Win!</div>
</a>
<div id="light" class="white_content">Congratulations, you've won!<br>Claim your prize now by completing a short survey:<br>
<input type="submit" value="Complete Survey" onclick="location.href='http://mobverify.com/cl.php?id=5c78fd59851bf0c4867c008c9882d808'"> 
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a>
</div>

Current style of the popup:

.white_content {
        display: none;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 150%;
        padding: 16px;
        border: 2px solid white;
        background-color: #2e3141;
        z-index:1002;
        overflow: auto;
        text-align: center;
        color: white;
        border-radius: 30px;
    }

javascript jquery html css popup

Answer 1

Answer №1

To incorporate this style into your project, simply insert the provided CSS snippet below:

.btn {
   width: 250px;
   height: 250px;
}
.btn:active {  
   background: url(http://www.example.com/image.gif) no-repeat; 
}

Answer 2

To incorporate this style into your project, simply insert the provided CSS snippet below:

.btn {
   width: 250px;
   height: 250px;
}
.btn:active {  
   background: url(http://www.example.com/image.gif) no-repeat; 
}

Answer 3

Answer №2

If you want to display the loader image upon clicking and then open a popup after a delay of 3 seconds, you can achieve it using a timeout function.

Here is a simple example:

var delay;

function displayLoader(){
  document.getElementById('loader').className = '';
delay = setTimeout(openPopup, 3000);
  return false;
}

function openPopup() {
  document.getElementById('light').style.display = 'block';
  document.getElementById('loader').className = 'hidden';
  clearTimeout(delay);
}

function closePopup() {
  document.getElementById('light').style.display = 'none';
  clearTimeout(delay);
  return false;
}

.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 150%;
  padding: 16px;
  border: 2px solid white;
  background-color: #2e3141;
  z-index: 1002;
  overflow: auto;
  text-align: center;
  color: white;
  border-radius: 30px;
}

.hidden {
  display: none
}

#loader {
  background: url(http://www.pointoffshore.com/SiteAssets/loading.gif) no-repeat center center;
  height: 50px;
  width: 50px;
}

<a href="#" onclick="displayLoader()">
  <div class="btn">Win!</div>
  <div id="loader" class="hidden"> </div>
  </div>
</a>
<div id="light" class="white_content">Congratulations, you've won!
  <br>Claim your prize now by completing a short survey:
  <br>
  <input type="submit" value="Complete Survey" onclick="location.href='http://mobverify.com/cl.php?id=5c78fd59851bf0c4867c008c9882d808'">
  <a href="#" onclick="closePopup()">close</a>
</div>

Answer 4

If you want to display the loader image upon clicking and then open a popup after a delay of 3 seconds, you can achieve it using a timeout function.

Here is a simple example:

var delay;

function displayLoader(){
  document.getElementById('loader').className = '';
delay = setTimeout(openPopup, 3000);
  return false;
}

function openPopup() {
  document.getElementById('light').style.display = 'block';
  document.getElementById('loader').className = 'hidden';
  clearTimeout(delay);
}

function closePopup() {
  document.getElementById('light').style.display = 'none';
  clearTimeout(delay);
  return false;
}

.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 150%;
  padding: 16px;
  border: 2px solid white;
  background-color: #2e3141;
  z-index: 1002;
  overflow: auto;
  text-align: center;
  color: white;
  border-radius: 30px;
}

.hidden {
  display: none
}

#loader {
  background: url(http://www.pointoffshore.com/SiteAssets/loading.gif) no-repeat center center;
  height: 50px;
  width: 50px;
}

<a href="#" onclick="displayLoader()">
  <div class="btn">Win!</div>
  <div id="loader" class="hidden"> </div>
  </div>
</a>
<div id="light" class="white_content">Congratulations, you've won!
  <br>Claim your prize now by completing a short survey:
  <br>
  <input type="submit" value="Complete Survey" onclick="location.href='http://mobverify.com/cl.php?id=5c78fd59851bf0c4867c008c9882d808'">
  <a href="#" onclick="closePopup()">close</a>
</div>

Click the button to trigger a loading popup, followed by a change in the text displayed on

Answer №1

Answer №2

Similar questions

Using TypeScript, let's take a closer look at an example of Angular

Mysterious source utilizing leafletView for showcasing popups within the Angular Leaflet Directive

Difficulty in locating elements within ngView-loaded elements using jQuery [AngularJS]

Exploring the functionality of the `super()` method in TypeScript

- shorthand CSS properties roster- index of abbreviated CSS attributes

The JSON.stringify function encounters difficulties when trying to format an object into

Tips on creating a post that can be viewed exclusively by one or two specific countries

Tips for updating mongoose user data with associated posts that share the same user id

Customize Your Google Maps with Checkboxes for Style Options

Capturing mouse clicks in Javascript: a guide to detecting when the mouse moves between mousedown and mouseup events

Retrieve events triggered by each element

Having trouble including a YouTube iframe code within the document ready function

What is the best way to ensure that only one of two textboxes is filled out in an HTML form?

Sending emails to multiple groups in Opencart can be easily achieved with the

Working with Vuex: Simplifying state management by accessing multiple state objects with a single update mutation/action

Is it normal for Node's console to not display all object properties?

Merge identical year items into a single entity

displaying a div upon checking the checkbox

Converting a 3D model from Unity to three.js for seamless integration

Is there a variety of values for the POST value field?