What is the best way to display a Bootstrap pop-up and then automatically hide it after a few seconds

Does anyone know how to display a Bootstrap popup when the page loads and automatically hide it after 3 seconds? I found an example online but I'm unsure how to adapt the code for my specific needs.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
javascripthtmlcsswebbootstrap-modal

Answer №1

If you want to achieve this using jQuery, you can utilize the setTimeout function. Simply add an onload function to the body and call onload="openModal()"

function openModal(){
    $("#exampleModalLong").modal();
    setTimeout(function(){ $("#exampleModalLong").modal("hide"); }, 3000);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<body onload="openModal()">
  <button type="button" class="btn btn-primary" onclick="openModal()" data-target="#exampleModalLong">
    Launch demo modal
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>

      </div>
    </div>
  </div>
</body>

Answer №2

Sure thing! Check out this CSS method:

    html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#exampleModalLong {
    -moz-animation: cssAnimation 0s ease-in 3s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 3s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 3s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 3s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

Want to see a live example in action? Click here https://jsfiddle.net/xcLj9hfo/

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

Display the form-control field only when a selection has been made in the previous form-control using HTML and PHP

I'm in the process of developing a webpage with form controls (2 in this example). Here's my code: <body> <div class="option_choice_global"> Select your options <div class="col-xs-2"> <lab ...

phphtmlform-control

Sending data when button is clicked from Google Apps Script to sidebar

I have been attempting to pass a list that includes both the start cell and end cell of the active range. I want to then assign each value from this list to separate input fields. document.getElementById("btn-get-range").addEventListener('click&apo ...

javascripthtmlgoogle-apps-script

Is the max and min-width being properly set by the keen-slider__slide class in keen-slider?

Check out my code snippet below: import React from 'react' import { useKeenSlider } from 'keen-slider/react' // Styles import 'keen-slider/keen-slider.min.css' interface Props { children: any } // const animation = { du ...

javascriptreactjsnpmnext.jskeen-io

Tips for automatically scrolling images horizontally in responsive layouts

Recently, I've been working on a website called . On the homepage, my portfolio images are arranged in a grid format using the <li> tag. I'm looking to align them side by side and have them scroll horizontally automatically, preferably with ...

javascriptcssimagescrollresponsive-design

I'm having trouble with my scroll bar in a React project using JavaScript. Can anyone spot what might be causing the issue?

Attempting to create a React site for the first time, so please forgive any novice mistakes or oversights on my part. Currently, my navigation bar is fixed at the top of the page with basic hover animations. I am aiming for it to disappear when scrolling d ...

javascripthtmlcssreactjsjsx

Is there a way to change a string that says "False" into a Boolean value representing false?

When retrieving values from the backend, I am receiving them as strings 'True' and 'False'. I have been attempting to convert these values into actual Boolean values, however, my current method always returns true. What is the correct a ...

javascriptjquery

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

Currently, I am working on a contact edit form. The entire form loads dynamically via ajax, appearing in a lightbox. The form is pre-populated with the existing contact's data. After clicking the edit button, jQuery scans for any changes in the for ...

phpjavascriptjqueryjson

Unable to wrap text with CSS in Internet Explorer

I am encountering some issues with certain styles that are functioning correctly in Chrome and Firefox but not in IE. The main problem I am facing is that a specific style that works fine in Chrome does not wrap text into the column in IE. To reproduce t ...

htmlcssflexbox

Is it possible for ajax to provide me with the information regarding the data size of the URL

Is there a way for the xjr object to access the total data size in KB or MB? I have been using the progress event and it can track this, so I was curious about obtaining the total data size. Here is the code snippet: var container = Pub.el('#super-1 ...

javascriptajax

What is the best way to link labels with input fields located separately in Angular?

Imagine a scenario where labels and form fields are being created in a *ngFor loop, as shown below: app.component.ts export class AppComponent { items = ['aaa', 'bbbbbb', 'ccccccccc'] } app.component.html <div class ...

javascriptangularformstypescript

Is there a way to bring in an NPM module without utilizing the keywords 'require' or 'import'?

After spending hours searching for a solution, I am still struggling with importing third-party libraries into my project that does not support 'import' or 'require'. It's frustrating to hit a roadblock like this, especially when w ...

javascriptnpmimportbrowserify

Issue with Jhipster4 when trying to generate an Angular 2 app

After utilizing jhipster4 to create my application, I noticed it consists of a client side and a server side. However, when running ./mvnw from the application's root directory, only the server is built, without the client. Here is the structure of my ...

javaangularwebjhipster

Tips on how to hide items from printing if they are not true in Vanilla JavaScript/TypeScript and Angular 9

How do I prevent interactions from being printed if the value is a number? ...

javascriptangulartypescript

The functionality of Google Map APIs is not compatible with Angular views

I'm currently attempting to utilize Google Maps APIs to create a basic autocomplete feature for a "Place" input box within an Angular routing setup. Following Google's developer instructions, in the <head> of my main template, I've in ...

javascriptjqueryangularjsgoogle-mapsautocomplete

Re-calculating with Jquery when input is updated

I am looking for guidance on how to make the calculator recalculate based on a change in the #calcTotal input field. I have successfully calculated all fields and managed to update the #cwac field when one of the values before it changes. Here is the HTML ...

javascriptjquery

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

javascripthtmlangulartypescript

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

I'm having trouble with the menu on my website. It's not functioning as expected - the dropdown feature isn't working, and two items are not staying in the correct position under the parent ul despite attempts to position them using CSS. Add ...

javascriptjqueryhtmlcss

Preventing parent click events in AngularJS when clicking on a child element: Tips and tricks

I am facing an issue with a <div> that has a ng-click directive, but this <div> contains a child element also with a ng-click directive. The problem arises when the click event on the child element also triggers the click event of the parent el ...

javascriptangularjsz-index

Tips for making a multiselect dropdown menu using bootstrap

I am working on a JavaScript application that parses data and displays it to users in a table generated by JavaScript. I am looking for a simple way to allow users to choose which fields to display in the table using a dropdown list or something similar. I ...

javascripthtmlcsstwitter-bootstrap

Animate div visibility with CSS transitions and Javascript

I'm currently working on incorporating an animation into a div that I am toggling between showing and hiding with a button click. While I have the desired animation, I am unsure of how to trigger it using JavaScript when the button is clicked. Can any ...

javascripthtmlcss