Modal on Scroll

14 replies·opened Nov 9, 2018

nikoslavsNov 9, 2018

Hello,
I need to setup modal on scroll instead modal on load, but cannot do it exactly how I followed other topics on forum.

Please check URL: https://www.allegrakrstarenja.com/en/index.html

We setup modal on load, can you also help with cookie enabled modal, how to make that work?

So to sum up, we need modal on scroll with cookie enabled?

Kindly

nikoslavsNov 9, 2018

Also, how to modal close on submit?

SemiColonWebSTAFFNov 12, 2018

Hello,

You can simply call the following JS Code on Form Submit:

$.magnificPopup.close();

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

nikoslavsNov 19, 2018

and can you please help me with my main question?

how to setup modal on scroll, not on load?

SemiColonWebSTAFFNov 21, 2018

Hello,

Unfortunately, this feature is currently not supported and will require customization. We will try introducing it in Our Future Updates.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

nikoslavsNov 21, 2018

Thank you for your reply, but on forum I found that you helped other people with this workaround:
http://support.semicolonweb.com/forums/topic/how-to-open-modal-on-scroll-instead-of-modal-on-load/
http://support.semicolonweb.com/forums/topic/modal-launch-automatically-when-scrolled-to-a-specific-point-in-the-web-page/

Just let me know if this is not supported now, so I don'n bother with it very much?

Also, what about cookie enabled modal? Can you test mine, is everything working properly?

Kindly

SemiColonWebSTAFFNov 23, 2018

Hello,

Thank You so much for your Continued Patience with this! :)

Yes we have provided with some experimental examples in the past for this feature but we currently do not provide any explicit support for this feature because it is out of scope of the current available features in Canvas. You can consider using the examples above and should you face any errors, you can provide us with a Live URL and we will definitely look into this and provide you with more assistance. But until this feature is completely incorporated in the core codes of Canvas, we will not be able to provide any dedicated support on this. Hope you understand.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

nikoslavsNov 23, 2018

Thank you very much for your detailed response.

Can you help me with second part of mine question, how to set that form doesn't show again, your example of COOKIE ENABLED MODAL?

Thank you

SemiColonWebSTAFFNov 24, 2018

Hello,

Thank You so much for your Understanding! :)

You can consider using a Button inside the Modal with an onclick Attribute to set the Cookie while closing the Modal:

onclick="jQuery.magnificPopup.close();Cookies.set( 'disable-modal', '1' );return false;"

And then use Javascript if/else Block to check the Cookie before opening the Modal:

if( Cookies.get('disable-cookie') != 1 ) {
	jQuery('#myModal1-trigger').magnificPopup('open');
}

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

nikoslavsNov 29, 2018

Hello Team,
thank you for your reply.
Cause I am using on-load modal, where should I use if/else block?

LIVE url: https://www.allegrakrstarenja.com/index.html

Kindly

PS: This is my trigger
<div class="modal-on-load enable-cookie" data-target="#contactFormModal" data-lightbox="inline" data-delay="6500" data-animation-in="fadeIn" data-animation-out="fadeOut"></div>

And my modal

<div class="modal1 mfp-hide" id="contactFormModal">
						<div class="block divcenter" style="background-color: #FFF; max-width: 700px;">
							<div class="row nomargin clearfix">
								<div class="col-md-6" data-height-xl="480" data-height-lg="480" data-height-md="480" data-height-sm="0" data-height-xs="0" style="background-image:  url(/images/promo/allure.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; "></div>
								<div class="col-md-6" data-height-xl="480" data-height-lg="480" data-height-md="480" data-height-sm="480" data-height-xs="480" style="padding: 40px">
									<div>
									<div>
										<div id="q-contact" class="widget quick-contact-widget clearfix">
											<h4 class="highlight-me nobottommargin">Želite na krstarenje?</h4>
											<p class="notopmargin"><small>Pošaljite nam upit i odgovorićemo Vam u najkraćem mogućem roku.</small></p>
										<div class="quick-contact-form-result"></div>
										<form id="quick-contact-form" name="quick-contact-form" action="https://42design.me/allegra/quickcontact.php" method="post" class="quick-contact-form nobottommargin">
											<div class="form-process"></div>
											<input type="text" class="required sm-form-control input-block-level" id="quick-contact-form-name" name="quick-contact-form-name" value="" placeholder="Vaše ime*" />
											<input type="text" class="required sm-form-control email input-block-level" id="quick-contact-form-email" name="quick-contact-form-email" value="" placeholder="Vaša E-mail adresa*" />
											<textarea class="required sm-form-control input-block-level short-textarea" id="quick-contact-form-message" name="quick-contact-form-message" rows="4" cols="30" placeholder="Poruka*"></textarea>
											<input type="text" class="hidden" id="quick-contact-form-subject" name="quick-contact-form-subject" value="Kontakt sa sajta" />
											<input type="text" class="hidden" id="quick-contact-form-botcheck" name="quick-contact-form-botcheck" value="" />
											<button type="submit" id="quick-contact-form-submit" name="quick-contact-form-submit" class="button button-small button-3d nomargin" value="submit">Pošalji</button>
										</form>
										</div>

									<p class="topmargin-sm nobottommargin"><small class="t300"><em><a href="#" onClick="$.magnificPopup.close();Cookies.set( 'disable-modal', '1' );return false;">Ne prikazuj više ovu formu</a></em></small></p>
									</div>
									</div>
								</div>

							</div>
						</div>
					</div>

SemiColonWebSTAFFDec 2, 2018

Hello,

The Default .modal-on-load's Enable Cookie feature has a minor bug. Simply find the following code in the js/functions.js File:

var elementCookie = Cookies.set( elementTargetValue );

and replace it with:

var elementCookie = Cookies.get( elementTargetValue );

This will definitely fix the issue with Cookie Modals. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

nikoslavsDec 3, 2018

Thank you, it really does the trick.

What is default value of cookie duration, and how I can modify it?

Kindly

SemiColonWebSTAFFDec 9, 2018

Hello,

The Default Value is Unlimited. You can find the following code:

Cookies.set( elementTargetValue, '0' );

and replace it with:

Cookies.set( elementTargetValue, '0', { expires: 7 } );

to make the Cookie expire after 7 Days.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

nikoslavsDec 13, 2018

Hello,
can you check once again url www.allegrakrstarenja.com
Because, now form is not opening, but magnific popup still triggers

Screenshot supplied

SemiColonWebSTAFFDec 14, 2018

Hello,

We have checked out your Website and the Modal appears to be working fine for us! Please let us know if you are facing any further issues with this.

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard