Scheduled modal

Bootstrap Studio Help
1

Hi community,

I’m searching the way to schedul a modal in BSS.
Any advice ?

2

Maybe a scrolling option ?

3

This will load a modal with id of ‘modal-1’ after 5 seconds from page load:

var myModal = new bootstrap.Modal(document.getElementById('modal-1'));
                                  
window.onload = function(){
   setTimeout(showModal, 5000)//run showModal function after 5000ms - 5 seconds
};

function showModal() { 
myModal.show()
}

To show modal after page scroll:

var myModal = new bootstrap.Modal(document.getElementById('modal-1'));
var shown = false;

var modalOnScroll = function() {
  var y = window.scrollY;
  if (y >= 800 && shown==false) {
    myModal.show()
    shown=true;//set this to true to only show the modal once
  }  
};

window.addEventListener("scroll", modalOnScroll);
3 Likes
4

I could not believe that your answered ! Thanks a lot for such a tip.
A final question : how to integrate your code in BSS ? I’m a newbie

5

At the bottom right of bss you will see the design tab.

Right click on Javascript and click New > JS File

Name your file (openmodal.js)
Double click
you will see a new tab at the bottom of the page with whatever you named the js
paste your code in
make sure to change the id of the modal to match

1 Like
6

I’ve got many things to learn… Thans a lot buddy !

1 Like
7

hello friend @richards I am also a newbie, I loved your contribution, a question, how is it done for the modal to only be shown once, that is, to leave it, but only to be shown once and not be shown again.

Excuse my English, I’m using google translator.

1 Like
8

On the second script - after page scroll…

On line 2:
var shown = false

When the script loads, shown is set to false, so it has not been shown

on line 5:

if (y >= 800 && shown==false)

If screen has scrolled more than 800px AND shown is false then it runs the rest of the script, which includes line 7 which sets show=true

If you wanted to do on the first script you would have to set a cookie:

var myModal = new bootstrap.Modal(document.getElementById('modal-1'));
                          
window.onload = function(){
   setTimeout(showModal, 5000)//run showModal function after 5000ms - 5 seconds
};

function showModal() { 
   let mc = getCookie("hasModalBeenShown");
   
    if (!mc) {//check to see if the cookie is set if not then show modal and set cookie
     myModal.show();
     setCookie ("hasModalBeenShown", "true", 2);  //the last variable is the number of days the cookie exists -- so in this case the cookie will last for 2 days and after will show the modal again 
    }
    
}

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
2 Likes
9

YOU’RE THE BEST. Honestly YOU ARE THE BEST. There should be a way to reward users like you. YOU’RE THE BEST.

1 Like
10

You’re welcome, hope it works out for you

4 Likes