Tagged: button, button click, Lightbox, MailChimp
-
AuthorPosts
-
June 3, 2016 at 4:08 pm #642597
Hi Guys,
I have been trying to get a lightbox to popup using a button in the advanced layout builder but for the life of me I cannot get the lightbox to show on the button click. I have tried multiple solutions to get this sorted including adding code to the functions.php file, adding quickCSS and creating hidden divs and color sections, copying the button code and adding it to a code box but the lightbox does not display on the button click. tried a bunch of sources from the forums but nothing seems to do the trick.
The closest thing I got working was a text link that shows the lightbox from https://kriesi.at/support/topic/contact-form-in-pop-up-prettyphoto-issue/ but I need it on a button as it is for a call to action. I know from here it is pretty easy to add the mailchimp form with a shortcode. I just need to get the lightbox to display on the click of the button.
I think I am confused as to what to add to the physical “link” of the button. Set manually and? #xxxxx does not work. http:/’myurl.com/mypage/#xxxx also does not work.
Help with this will surely be appreciated.
Thanks
JJune 5, 2016 at 1:08 pm #643125Hey joachimpr,
Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.
Regards,
RikardJune 5, 2016 at 10:27 pm #643214Hi Rikard,
Please see the temp details.
Thanks
JJune 6, 2016 at 10:28 pm #643678Hi,
check out this link: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto to check the examples (Demos, Codes) about how to do it.
Best regards,
AndyJune 7, 2016 at 7:50 am #643846Hi Andy,
Thanks for the link. I think I am miscommunicating. These examples are all based on either img or text links (a href’s). This I know how to do. What I am trying to achieve is to use the button control on the enfold advanced layer builder and upon clicking this button open a popup with the mailchimp form.
The problems that I am facing with this is what do I enter in the link section of the button? Specify amnually and? the #tag links do not work. I have tried using the button code in code blocks as suggested in other posts, no luck. I have added different sources to functions.php and created hidden divs with quick css and use those class names in the code block of the button but still nothing. Hence the post. So in retrospect, even though the link you supplied is a valuable resource to have (I will add it to my bag of tricks) it does not bring me any closer to a solution for my particular problem. Thanks for the support so far.
J
- This reply was modified 8 years, 5 months ago by joachimpr.
June 7, 2016 at 11:27 am #643959Hi,
refer to: https://kriesi.at/support/topic/open-form-in-a-lightbox-popup/#post-375355
Best regards,
AndyJune 7, 2016 at 12:54 pm #644016Hi Andy,
I went through this whole post and all of its solutions including adding all the code to the functions.php as stated earlier. This post was part of the solutions I have tried. Nothing worked. Clicking the button presents no popups. I can go through it again and add those solutions again for completeness if it would help?
Thanks
JJune 7, 2016 at 1:57 pm #644056Hi,
did you follow this solution too? https://kriesi.at/support/topic/open-form-in-a-lightbox-popup/#post-399497
Best regards,
AndyJune 7, 2016 at 2:08 pm #644062Yes, That is the one that I tried which looked the most promising. Problem there was that he does it with image links and normal text links. Not with a button and it seems that the button does not like the #value. Not understanding french added to the problem but I think I got the long and the short of it. I did try it with the image elemant but by comparing the screenshots on my installation it seems that there are options on the screenshots which I do not have.
June 7, 2016 at 2:12 pm #644066Hi,
what about the iFrame (External sites) solution from here? this is not for images, but for content like you need.
Best regards,
AndyJune 7, 2016 at 2:37 pm #644099Hi Andy,
Even though I have come across this page in my research, I have not specifically tried the iframe solution as this did not cross my mind to be a solution to the problem seeing as the popups on this page are also being launched from a text link (which I completed successfully with displaying the form). The form is just a mail chimp enfold form that can be used in the advanced layout builder. it also has a shortcode which means it can be embedded in the div to display so there is no external content hence no need for an iframe solution. the method used to display whatever is in the popup is irrelevant here. What is relevant is to actually get the popup to display on the click of the button.
What I cannot get sorted is to get the popup to… well… urr… pop up when the BUTTON is clicked. Not a text link as in these solutions/guides. For more clarity, please check the link in the private content. Thats the url to the test page. When I click on the “Sign up for our limited time offers” button. the form should pop up.
I will create a sample page with all the solutions that I have tried, working and not working and then revert back to you with that page.
Thanks for the brilliant support so far. It is very much appreciated.
June 8, 2016 at 11:54 am #644732Hi,
if the solution we have provided to you do not work for you then it seems that you need to search for a plugin with such a function. What is Mailchimp support saying about this? maybe they have an option or a plugin with such a function for their form for you.
Best regards,
AndyJune 9, 2016 at 7:59 am #645269Hi Andy,
The mail chimp form is not the problem hence there is no need to contact mail chimp support. and I fail to see a reason why a third party plugin should be downloaded to get this working. Forget about the mail chimp form. The goal is to get a popup to display on the click of the button regardless of the content (not a text link, a BUTTON). The problem is that the popup displays when the text link is clicked but not when the buttons are clicked.
Please see the sample page that I have created for you. It explains everything clearly with examples.
Thanks
JJune 9, 2016 at 8:34 am #645287Hi!
You need to add the “inline_popup” class attribute in the button html to enable the lightbox. Use the actual html of the button in a text or code block then add the class attribute:
<div class="avia-button-wrap avia-button-center avia-builder-el-6 el_after_av_heading avia-builder-el-last inline_popup"> <a href="#content-to-open" class="avia-button inline_popup avia-icon_select-yes-left-icon avia-color-theme-color avia-size-x-large avia-position-center "><span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">Need to show popup when this button is clicked</span></a> </div>
Best regards,
IsmaelJune 9, 2016 at 10:39 am #645351Hi Ismail,
This is great. Now we are getting closer to a solution. Can you recheck the code again? The code is behaving funny in the sence the black overlay on the page gets displayed but not the physical popup. I have added the code to the code block section on the test page so you can check the result there.
The code I used:
<div class="avia-button-wrap avia-button-center avia-builder-el-6 el_after_av_heading avia-builder-el-last inline_popup"> <a href="#content-to-open" class="avia-button inline_popup avia-icon_select-yes-left-icon avia-color-theme-color avia-size-x-large avia-position-center "> <span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> <span class="avia_iconbox_title">Need to show popup when this button is clicked</span></a> </div>
Thanks so much for the help. It is appreciated. Almost there.
- This reply was modified 8 years, 5 months ago by joachimpr.
June 10, 2016 at 8:25 am #646079Hey!
Add the “inline_popup” class attribute in the link tag.
<a href="#content-to-open" class="avia-button inline_popup avia-icon_select-yes-left-icon avia-color-theme-color avia-size-x-large avia-position-center ">
Remove it from here:
<div class="avia-button-wrap avia-button-center avia-builder-el-6 el_after_av_heading avia-builder-el-last inline_popup">
Final code:
<div class="avia-button-wrap avia-button-center avia-builder-el-6 el_after_av_heading avia-builder-el-last"> <a href="#content-to-open" class="avia-button inline_popup avia-icon_select-yes-left-icon avia-color-theme-color avia-size-x-large avia-position-center "> <span class="avia_button_icon avia_button_icon_left " aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span> <span class="avia_iconbox_title">Need to show popup when this button is clicked</span></a> </div>
Best regards,
IsmaelJune 10, 2016 at 10:37 am #646138WOOOHOOO! It is AALLLIIIIVVVEEE!
Thanks Ismail. You are a rockstar! Andy, thanks for your involvement as well. Please keep this thread open, I would just like to summarize the solution and post it here for the community.
Thanks
JJune 11, 2016 at 12:07 am #646430Hi,
great! We well keep this one open for you, so you can share your whole solution with us. Thanks!
Best regards,
AndyAugust 22, 2016 at 1:56 pm #675722Ismail says the solution is to use the code:
<div class=”avia-button-wrap avia-button-center avia-builder-el-6 el_after_av_heading avia-builder-el-last”>
<span class=”avia_button_icon avia_button_icon_left ” aria-hidden=”true” data-av_icon=”” data-av_iconfont=”entypo-fontello”></span>
<span class=”avia_iconbox_title”>Need to show popup when this button is clicked</span>
</div>Could you explain to me, where to enter this code? And would I need to adjust some parts of the code to be used on another website?
August 22, 2016 at 3:03 pm #675787Hi,
use a code block element to insert the code.
Best regards,
AndySeptember 17, 2016 at 6:34 pm #687970Woot! Incredibly happy to have found this thread. I too was looking for this.
I have one addition:
Since a subscription to a newsletter popup usually is something you’d probably want to use in more than one place in a site, I guess you could create a text widget with this code. Then you can call it anywhere you like, using the widget block from the page builder. Right?Kind regards from The Netherlands,
AnneSeptember 19, 2016 at 8:32 am #688350 -
AuthorPosts
- You must be logged in to reply to this topic.