Jump to content

Community

BomAle

Call to Action Popup

Recommended Posts

Now I'm on the phone... tomorrow I'll write you a template as follows:
- set the image at an angle at the bottom right, use a background gray taken from the image
- overlap and align a full-height box and half width on the left for the content and registration form.

Edited by BomAle

Share this post


Link to post
Share on other sites
Quote

I assume it will be mobile friendly?

it's a main feature on this plugin 👍

image.thumb.png.b790d092d191a47a10165c5212a04f04.png

Content

<p>
	<span style="color:#c0392b;"><span style="font-size:20px;"><strong>Join our trading community</strong></span></span>
</p>

<p>
	<span>Hello, I am Kim, founder of SteadyOptions.</span><br>
	<span>Our mission is to help you to become a better trader.</span>
</p>

Template

<div id='bacalltoactionpopup' data-controller='plugins.bacalltoactionpopup' class="ipsHide"
	data-size="{$p->size}"
	data-modal="{$p->modal}"
	data-content="{$p->content}"
	data-title="{$p->title}"
	data-close="{$p->close}"
	data-close-on-click="{$p->closeOnClick}"
	data-open-on-click="{$p->openOnClick}"
	data-class-name="{$p->className}"
	data-transition-popup-show="{$p->transitionPopupShow}"
	data-transition-popup-hide="{$p->transitionPopupHide}"
	data-transition-modal-show="{$p->transitionModalShow}"
	data-transition-modal-hide="{$p->transitionModalHide}"
	data-exit="{$p->exit}"
	data-scroll="{$p->scroll}"
	data-unset="{$p->unset}"
	data-align="{$p->align}"
	data-position="{$p->position}"
	data-wait="{$p->wait}"
>
	<div class='ipsPad ipsType_center' style='background-color: #c7c7c7;background: url(https://steadyoptions.com/uploads/monthly_2018_01/IMG_7292_web_face.thumb.jpg.bbaa235164633c9ff8eac391ee5cf9fa.jpg) no-repeat scroll 100% 100%, linear-gradient(to bottom, #c7c7c7 0%,#CACACA 20%, #d6d6d6 100%);'>
	<div class='ipsType_left' style="margin-right:200px">{$p->msg|raw}</div>
	</div>
{{$form = new \IPS\Helpers\Form( 'form', null, \IPS\Http\Url::internal( 'app=core&module=system&controller=register', 'front', 'register' )/*, array( 'data-controller' => 'core.front.system.register')*/ );}}
{{$email = new \IPS\Helpers\Form\Email( 'email_address', NULL, TRUE, array( 'accountEmail' => TRUE, 'maxLength' => 150, 'bypassProfanity' => TRUE, 'placeholder' => 'Email' ) );$form->addHtml( $email->html() );}}
{{$form->addHtml(\IPS\Theme::i()->getTemplate( 'forms', 'core', 'global' )->button( 'sign_up', 'submit', null, 'ipsButton ipsButton_primary ipsButton_small', array( 'tabindex' => '2', 'accesskey' => 's' ) ));}}{{$form = preg_replace(['/data-ipsForm/', '/<div class="ipsAreaBackground_light ipsClearfix ipsPad ipsType_center">[.\s]*<\/div>/'], '', $form );}}
<div class="ipsPad" style="text-align:center; background-color: rgb(11, 11, 11); box-shadow: 0 6px 3px -3px rgb(0, 0, 0) inset;">{$form|raw}</div>
</div>

 

Edited by BomAle

Share this post


Link to post
Share on other sites
1 minute ago, Unlucky said:

Just gone ahead and bought this - Am I correct in thinking we can only have 1 call to action popup? 

Thanks

Into next major version will be possible to add more popups, the plugin has been thought only to offer an instance

Share this post


Link to post
Share on other sites
3 hours ago, Unlucky said:

Re: - on mouse exit on top of page

How near the top of the page does the popup fire?

When position of mouse is less then 10px from the top the popup appear.  I have to improve the functionality of the detection exit intent (track inactive window for touch device not only mouse).

I don't have an ETA for major version, but I will show progress on this topic.

Share this post


Link to post
Share on other sites

If we scroll to the bottom of the page and then use the mouse up action, the popup pops at the top of the page as normal but is out of view until we scroll back to the top of the page

Is there a way the popup can be in view whatever part of the page we are on and do the mouse exit action?

Thanks & Happy New Year

Share this post


Link to post
Share on other sites

by clicking outside the popup even if off the screen the popup must close.
If it were not so, you can send me the site where the problem occurs in private, so I can identify and correct it.

Share this post


Link to post
Share on other sites
18 hours ago, BomAle said:

by clicking outside the popup even if off the screen the popup must close.
If it were not so, you can send me the site where the problem occurs in private, so I can identify and correct it.

Hi that does work. Is there a setting to stop the screen going darker?

Share this post


Link to post
Share on other sites

Yes, you can disable it into "Customize Modal" tab

Screenshot_20190104-234643_cropped.thumb.png.d586221b2e8fe6228fa46448494169f4.png

or recolor with a custom code to add into content field, see Documentation tab section Interact with the plugin

Screenshot_20190104-234559.thumb.png.1c89984e78f928d82cefadce428d2765.png

Share this post


Link to post
Share on other sites

I have this setup as a guest welcome message with a signup link that displays in the bottom right corner.  Is there a way to keep that displayed but everything in the background to be clickable?  I'd like to keep the message displayed but guests able to still browse the forum.  Thanks!

Edited by mz_

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy