Timed Pop-Up

[KBConcepts]

Is the a way to implement Pop-up that shows up after .5 seconds and then (image) fades away if no choice is made after say… 10 seconds. So on the Pop-Up be a Opt-In or Opt-Out.

[Pealco]

You want a modal that appears after .5 seconds with 2 buttons, and if nothing is pressed in 10 seconds, you want the modal turned off?

[KBConcepts]

I knew you would reply before anyone else.
Yes and the left and right buttons will have different hyperlink. Possible faded image or gradient background

[Pealco]

So resuming…

1st - Create a modal in your page; (take note of the name of the modal)
2nd - Go to “Page Settings” and click “Add Code” and type the following:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
	    	setTimeout(function(){
    		$('#modal-37125').modal('show');
    	}, 5000);
    		setTimeout(function(){
    		$('#modal-37125').modal('hide');
    	}, 15000);
    });
</script>

3rd change in the code this values:

• Change #modal-37125 to the name of your modal in Step 1

• Change the first time: 5000 for the desire time the modal shows after loading the page;

• Change the second time: 15000 for the desire time for the modal hides after the page loads;

5000 milliseconds is 5 seconds
15000 milliseconds is 15 seconds

Hope it helps you…

[KBConcepts]

You Rock @Pealco!
I’m going to play with this. Hoping this will work. You’re the expert, I’m the student.

[Pealco]

I’m not expert, just going and learning…

[RobsterUK]

Please do share with us the results - be interesting to see this in action.

[Pealco]

Hello @RobsterUK and @KBConcepts there you have a little Video implementing the code…

Hope it helps you:

[KBConcepts]

@Pealco, Sometime I can’t come close to expressing how grateful I’m to you my friend.

[hkiyany]

This is great implementation.
@Pealco have another question here:

Is there any way to keep that window-modal stay on bottom right without making page dimmed or inactive? User can simply close or interact with it. appreciate any help.

[Pealco]

Hello @hkiyany

If I understand you need the last part of close modal disable, and add interaction in the background page and disable ESC keyboard, and make modal appear in the bottom right side.

If this Is the case there you have the instructions:

1st - Create a modal in your page; (take note of the name of the modal)

2nd - Go to “Page Settings” and click “Add Code” and type the following:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
	    	setTimeout(function(){
    		$('#modal-42265').modal("show");
    	}, 5000);
    });

</script>

3rd - Change in the code this values:

• Change #modal-42265 to the name of your modal in Step 1
• Change the time: 5000 for the desire time the modal shows after loading the page;

4rd - When you select the modal in the tree view, add the folowing "Custom Attribute"s:
Name: data-keyboard
Value: false

5th - Add a custom class like for example modal_position

6th - In the properties where you have the script code add the following code:

<style>
.modal-open {
	overflow: auto !important;
}
.modal-backdrop {
  display: none !important;
}
.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}
.modal_position {
    width:20%;
    position:fixed;
    bottom:10px;
    right:10px;
    margin:0;
}
</style>

7th - Don’t forget to go to Close button change interaction to None and add the following “Custom Atribute”:

Name: data-dismiss
Value: modal

So it will close the modal instead of reload page and enter in a loop of death…

8th - You end up with something like this:

Hope it helps you…

[hkiyany]

@Pealco

data-dismiss

Thanks million. You made me achieve this without knowing simple line of code. I would be happy to buy you coffee just to say thank you.

In my achievement two things are not same:

Placement is left of screen instead of right.
It’s very close to edge of screen.

What part of above code I should modify?

I did also experiment with button below text instead of icon on top. in both implementaion everything works just fine. Thank you again for your time.

[Pealco]

Hello @hkiyany, no problem you’r welcome,

So to achieve that, in the style code:

<style>
.modal-open {
	overflow: auto !important;
}
.modal-backdrop {
  display: none !important;
}
.modal-open .modal {
    width: 300px;
    margin: 0 auto;
}
.modal_position {
    width:20%;
    position:fixed;
    bottom:10px;
    right:10px;
    margin:0;
}
</style>

In the area related to the .modal_position just change the part of code

right:10px;

to

left:10px;

Think in the screen as left positioning or right positioning then tell the system to give 10px from the edge you select, so for example you want your modal 10 px apart of the right edge, so the code is: right:10px;if you want in the left edge but more apart then the code is: left:30px;
And the same regarding vertical position if you want the modal on bottom apart 10px then the code is bottom:10px;but if you want the modal on the top part of the screen and apart 30px then the code is: top:30px;

Hope it helps you, about coffee this one is free the others I send you my coffeeshop address

[hkiyany]

Thanks again. I was able to figure out all but still position for some reason always on bottom left.
whatever I change on code doesn’t help.

only change I was able to see if I click on Modal, then change alignment. In this case it will appear middle or top but all the time left aligned!

Maybe something my code overlaps it. Couldn’t figure out yet. Will play more. Thanks.

[Pealco]

@hkiyany did you add the “modal_position” class to the modal? The 5th step in my early posts?

[hkiyany]

Yes I did applied 5th step. which is adding the class to modal.
But I have not edited the class which I guess code given will take care of it, right?

[Pealco]

Strange, if you want please send me your project and I can have a look.