Automatic modal when starting home page

I Need Help
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.

3 Likes
2

It would be great.

1 Like
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

2 Likes
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');
});
5 Likes
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/

2 Likes
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ā€¦

9 Likes
18

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

1 Like
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

1 Like
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ā€¦