Automatic modal when starting home page


#1

Hi.

A question for those who have already used the Bric de Modal (pop-ups).

Can you make the Modal appear on the home screen automatically when you load the page, without having to put a button that triggers the Modal ??

And only do it once. That is, if you return to the home page, it should no longer appear

Thanks for your help.

PD: Sorry for my English, I use a translator.


NEW Website - mcvmfonds.com
#2

It would be great.


#3

That would need additional Javascript and something to log a cookie so it doesn’t show to those who have dismissed it.


#4

I had a look at one of my MailChimp popup modals and yes there is a good amount of code that is needed to make this work.

Maybe @Pealco or @Whittfield could come up with some generic Javascript that we could use for Blocs.

Casey


#6

At the moment, I would not mind if the modal has to appear whenever the home page loads and thus avoid the cookie and reduce some code


#8

Hi!
Here is a solution if you don´t mind that the popup opens everytime the page is loaded.

1.) create a html widget and fill in this code:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true" id="onload">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h3 class="modal-title"><i class="fa fa-exclamation-circle"></i> HEADLINE</h3>
        </div>
        <div class="modal-body">
        <p>TEXT</p>
        </div>
      </div>
    </div>
</div>

2.) Page Settings -> Add Code -> Footer (put this between script tags)

$(window).load(function(){
$('#onload').modal('show');
});

#9

Hello @Wam

I create for you the following,

Be careful after you close you will never see it again, (or you can clean your cache and historic for that site)

In the first page you will only have one time modal, and in the second page (see navigation) you will always have a modal at the opening or refresh of the page.

https://blocs.webtekpc.pt/wam/


#10

Thanks for taking the time to work on this.

Casey


#11

It works well also… You do have to clear everything for it to come back up. Good and bad I guess. Some users hate them but in mailchimp they dont popup everytime either.

So nice to be able to make your own modals.

Thanks

Casey


#12

If someone need I share how to do it, I just don’t share right the way, because it probably not be the solution, for who ask, and so I don’t waste time making a long explanation.


#13

No need, if you can’t find the script maybe you should not use it…

Thanks again for taking the time.

Casey


#14

Didn’t understand…


#15

Thank you very much @wolfganghofer @Pealco for dedicating your time to my query.
I will test your idea and I will comment on how it works in my project

Best regards


#16

@Pealco have you used the solution code of @wolfganghofer?

If you have used another solution, could you put the code of your solution here?

Thank you


#17

@Wam I didn’t use code this time for modal (@KBConcepts :wink:) there is a bric call Modal that you can customize as you want…

Now code (@KBConcepts :yum:):


  1. ONE TIME MODAL WITH COOKIES:

In the page preferences you just add the following code:

<script>
// A $( document ).ready() block.
$( document ).ready(function() {
  if (document.cookie.indexOf('visited=true') == -1){
    // load the overlay
    $('#modal-32886').modal({show:true});
    
    var year = 1000*60*60*24*365;
    var expires = new Date((new Date()).valueOf() + year);
    document.cookie = "visited=true;expires=" + expires.toUTCString();

  }
}); 
</script> 

And where you see ‘#modal-32886’ just change for the number of your modal that you create as I say above.

Don’t forget if you want that the button inside the modal instead of load the page, close/hide the modal, you go to interactions and in the Type you choose “None” , and in Costume Atributes you add a new atribute with this values:
Name: data-dismiss
Value: modal


  1. ALWAYS START MODAL

In the page preferences you just add the following code:

<script type="text/javascript">
    $(window).on('load',function(){
        $('#modal-32886').modal('show');
    });
</script>

And where you see ‘#modal-32886’ just change for the number of your modal that you create as I say above.

Don’t forget if you want that the button inside the modal instead of load the page, close/hide the modal, you go to interactions and in the Type you choose “None” , and in Costume Atributes you add a new atribute with this values:
Name: data-dismiss
Value: modal


And That’s it…


#18

@Pealco Wow you are making blocs so fun!! You should get a BTC bitcoin address so people can tip you


#19

@cableguy30 :shushing_face: I didn’t know what and how I can get BTC bitcoin…:shushing_face:


#20

go to my youtube channel . cryptonoob and I teach you how to start https://www.youtube.com/channel/UCNX4A_HvVACLB7iUZAJsG8A


#21

[quote=“Pealco, post:17, topic:6795”]

Thank you very much @Pealco

His two ideas for my question are ideal.

I would like to learn how to code routines like the one you have done.

Excuse my ignorance, in what language are your solutions made?

I’m really grateful to you.

People like you and like @wolfganghofer, @Eldar and many other colleagues make this BLOCS Community a great family.

With best regards


#22

Hello @Wam answering to another request I done 2 new situations in your demo the no possibility to close the modal, when you want a request view…:

Hello @RME sorry I didn’t have that contemplated but… It is now…
I have done two pages to @Wam page, check it please:

https://blocs.webtekpc.pt/wam

I block both situations, in both pages Auto and Manual, the no possibility to click outside the modal and no ESC button on keyboard, bet you can choose only the click or only the ESC or both as I choose.

Hope it helps…