Jump to content

Call to Action Popup


BomAle
 Share

Recommended Posts

  • 4 months later...
  • 6 months later...

from suggestion: 

Content

<p>
	<a class="ipsAttachLink ipsAttachLink_image ipsAttachLink_left" href="https://i.imgur.com/2Q9nu8m.jpg" style="float: left;"><img alt="book cover" class="ipsImage" height="206" src="https://i.imgur.com/2Q9nu8m.jpg" style="width: 148px; height: 220px;" width="196"></a>
</p>

<p style="text-align: left;">
	<span style="font-size:22px;line-height:1.5;"><strong>12 Proven Ways to Convert Abandoning Visitors into Subscribers</strong></span>
</p>

<p style="text-align: left;line-height:1.8;">
	Over 70% of visitors who abandon your website will never return! Learn how to unlock the highest conversion revenue from each of your website visitors!
</p>

removed class ipsImage_thumbnailed, unset the border for attached image.

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'>
	{$p->msg|raw}
	</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="background: #d0d0d0;text-align:center">{$form|raw}</div>
</div>

removed {{if !member.member_id}}...{{endif}} from Template field, I suggest to adopt "Show to selected Group" option for filter by groups (so it's easier to manage and decrease confusion).

Edited by BomAle
Link to comment
Share on other sites

  • 4 weeks later...

Hi i bought this plugin but it's very difficult for me to understand. I have two questions please:

1- With this plugin only can be set one pop up?

2- I want to make a pop up which appears when cliking in a block in the sidebar. At the moment it works calling an iframe. You can look it working here.

Any help for doing it please?

http://encontinuo.com/index.php#

1948147104_Capturadepantalla2018-03-23alas21_50_37.thumb.png.67cbfa9910b210aaf9a05eb61063a17d.png

Edited by Pedro Ibáñez
Link to comment
Share on other sites

9 hours ago, Pedro Ibáñez said:

1- With this plugin only can be set one pop up?

The plugin configuration is restricted to only one instance, but you can create a lot of popup if you don't would cookie remember.

I must convert this plugin to app when I have some free time.

9 hours ago, Pedro Ibáñez said:

I want to make a pop up which appears when cliking in a block in the sidebar.

No problem, you must configure popup panel as follow:

Customize Popup tab

1. Close popup on click elements, leave empty

image.thumb.png.315131dbf15725c531b625709519932f.png

2. Template, replace with

<div id='bacalltoactionpopup' data-controller='plugins.bacalltoactionpopup' class="ipsHide"
	data-url="http://encontinuo.com/calc.html"
	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'>
	{$p->msg|raw}
	</div>
</div>
<script type="text/javascript">
;( function($, _, undefined){
"use strict";
ips.controller.mixin('bacalltoactionpopup', 'plugins.bacalltoactionpopup', true, function () {
	this.around('close',function(fn){
		var orig = fn();
		orig.done(function(){
			ips.utils.cookie.unset('bacalltoactionpopup');
		});
		return orig;
	});
});
}(jQuery, _));
</script>

Display Rules tab

3. Show Again, check Always option

4. Open popup on click elements, insert 

a[href*="//encontinuo.com/calc.html"]

or for sidebar specific

#ipsLayout_sidebar a[href*="//encontinuo.com/calc.html"]

image.thumb.png.c27202bfcaf2794299e439ae058c70c1.png

NOTE: Now I upload 1.0.2 beta 7 it is a small fix for Open popup on click elements

Edited by BomAle
Link to comment
Share on other sites

Thanks BomAle!

On 24/3/2018 at 7:06 AM, BomAle said:

I must convert this plugin to app when I have some free time.

On 23/3/2018 at 9:53 PM, Pedro Ibáñez said:

It will be very good to use more than one instance!

 

I was configuring the panel and I can't get it to work properly:

This is the good one

http://encontinuo.com/calc.html

and the result of the popup is this

1005284639_Capturadepantalla2018-03-25alas15_22_15.thumb.png.cefcf3723594007348943aa5c019feea.png

It's not showed well and also the calculator is not working...

I have sent you the passwords for I you can take a look please.

 

Much thanks

 

Link to comment
Share on other sites

Yes sorry

<div id='bacalltoactionpopup' data-controller='plugins.bacalltoactionpopup' class="ipsHide"
    data-url="http://encontinuo.com/calc.html"
    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'>
    {$p->msg|raw}
    </div>
</div>
<script type="text/javascript">
;( function($, _, undefined){
"use strict";
ips.controller.mixin('bacalltoactionpopup', 'plugins.bacalltoactionpopup', true, function () {
    this.around('close',function(fn){
        var orig = fn();
        orig.done(function(){
            ips.utils.cookie.unset('bacalltoactionpopup');
        });
        return orig;
    });
});
}(jQuery, _));
</script>

Link to comment
Share on other sites

21 hours ago, Pedro Ibáñez said:

Much thanks BomAle, I just updated but I don't how to configure...

Change into Template field the content:

<script....</script>

into

<script type="text/javascript">
;( function($, _, undefined){
"use strict";
ips.controller.mixin('bacalltoactionpopup', 'plugins.bacalltoactionpopup', true, function () {
	this.around('close',function(fn){
		var orig = fn();
		orig.done(function(){
			ips.utils.cookie.unset('bacalltoactionpopup');
		});
		return orig;
	});
	this.after('setup',function(){
		$('#'+this.bacalltoactionpopup.dialogID)
		.find('.' + this.data.className + '_content')
		.prev('[data-action="dialogClose"]')
		.css("display", "none");
	});
});
}(jQuery, _));
</script>

and active Close Button field.

make sure you have modal active (because of a bug that are correcting, the option must remain active i think until 4.3)

test.thumb.gif.c79c6a18f44221485ae7d1018e36fd4b.gif

Link to comment
Share on other sites

The preview probably works, from your configuration the dialog show when you click a link (/calc.html). if you would a preview active into Display Rules the exit, wait or scroll options don't save or restore after the test.

Edited by BomAle
Link to comment
Share on other sites

  • 5 months later...
18 hours ago, steadyoptions said:

Just purchased it, looks good.

Thanks for purchase it 🙂

18 hours ago, steadyoptions said:

How I get rid of "Just now"? Looks like it indicates the time it has been changed.

image.thumb.png.3e689be1be9335efac73f472c69b55e5.png

remove the highlighted part and save (deselect "Last Edit" to avoid the cancellation of cookie)

18 hours ago, steadyoptions said:

Also, is it possible to change the background color of the whole popup?

add this code after last </div> inside "Template" field

<script>
;( function($, _, undefined){
"use strict";
ips.controller.mixin('bacalltoactionpopup', 'plugins.bacalltoactionpopup', true, function () {
     this.after('setup',function(){
        $('#'+this.bacalltoactionpopup.dialogID)
             .find('.' + this.data.className + '_content')
               .css("background-color", "rgba(255, 255, 200, 0.7)")
             .end().prev('.ipsModal')
	               .css("background", "rgba(0, 0, 0, 0.7)")
     });
});
}(jQuery, _));
</script>

you must change second parameter inside "css" function with color value you would. I suggest https://www.css3maker.com/css-3-rgba.html for choose it.

Into Documentation tab you can read all explanation about usage and interaction with plugin

Edited by BomAle
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...