Docs

[jmartinos]

Hello,

I have installed the Convertplug extension and created my own submission form. So far it looks the way I want it to, but is there a way to set it so that when someone clicks outside of the slide-in box/form, it hides (similar to clicking the close button)?

My research says it should be able to be done through javascript, and I have a custom javascript plugin, but I’m not sure how I would write the javascript to do this.

The website it http://www.eliteithome.com/lp

Thank you in advance.

[Rad]

Hi there,

Thanks for writing in.

Please add this code to your custom javascript.

jQuery( function($) {

$(document).on('click','.cp-overlay', function(e) { e.stopPropagation(); $(this).off('click'); return false;} );

} );

Thanks!

[jmartinos]

Thank you for your response, for some reason that code is making it so my slide in form isn’t showing up now. Is there another option?

Thank you!

[Rue Nel]

Hello There,

Thanks for the updates! To resolve your issue, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($) {
  $(document).ready(function(){
	$('.cp-slidein-global').on('click touchend', function() {
	  if ($('.smile-slideInRight').length > 0) {
	    $('.slidein-overlay-close').trigger('click');
	  }
	});
  });
})(jQuery);

And then please also add the following css code in the customizer, Appearance > Customize > Custom > CSS

.cp-slidein-global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

This will make sure that when you click outside of the slide in form, it will close just like clicking on the X button.

We would loved to know if this has work for you. Thank you.

[jmartinos]

It looks like that did it. Thank you very much!

[Nabeel A]

Glad we could help 🙂

Cheers!

[jmartinos]

Upon further inspection, it looks like using this code is making it so all of my clickable links on the pages I am having this slide-in form show up on, are no longer clickable. Even my footer is not clickable anymore, but once I remove the CSS and JS you recommended, they all become clickable again. Is there a solution to this?

Thank you.

[Jade]

Hi there,

Please try to update this code:

.cp-slidein-global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

to

.cp-slidein-global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

[jmartinos]

That seems to have worked. Thank you!

[Joao]

Glad to hear it,

Joao

[Author]

Posts