Is it possible to trigger a popup using BBcode?

Questions
1

Hi, I’d like to trigger a login/signup popup within a sentence. Is it possible using BBcode or some other method?

Here is the same question from 2016 … I’m hoping a cleaner method is available.

Thanks!

2

It isn’t necessary to use BBCode for this. Rather, you can have Bubble “listen” for a specific word to be typed. And, when that happens, for a certain workflow to run

This GIF will take you through the basic process of setting that up.

Jan%209%202019%2012_46%20PM

Dan (creator of LearnTo - 15+ hours of Bubble tutorials and live coaching)

1 Like
3

Hi Dan,

Thanks for the response. I’m referring to a simple link in the middle of the sentence. For example, for a text element containing:

You must log in or sign up to view.

I want “log in or sign up” to be a link to show a login/sign up popup.

Thanks!

4

Somewhere here in the forums I posted a solution to this. … ah here it is:

1 Like
5

Thanks Keith! That did the trick.

For future readers:

  • I installed the free Toolbox plugin
  • added a “JavaScript to Bubble” element to page
  • named the element’s suffix ‘loginPopup’, so my function name became bubble_fn_loginPopup.
  • just below that, checked “Trigger event”
  • added a workflow event (Elements > A JavaScript to Bubble Event), choosing my new JavaScript function, that popped up my login popup

Here’s the content of my HTML element:

<p style="color:#666666">Have an account? Please <span style="cursor:pointer;color:#1FACD5" onclick="bubble_fn_loginPopup()">log in</span>. Otherwise, fill in your name and email below.</p>

Taking this further, in order to get the link to change color when hovered over and clicked, it doesn’t seem possible to do this using inline styling. Maybe I’d need to point the page to a stylesheet in the page’s header section?

4 Likes
6

I believe you’ll have to give your span a name and then add some CSS to the page that notes what the :hover state should be for that span.

(Sorry, I am not hugely great with CSS. However, Googling about on styling spans on hover will get you there.)

7

yep, got it to work defining the span as a class, taking the CSS out of the span tags, then adding style tags to the pages header.

Here’s my new span code:
<p style="color:#666666">Have an account? Please <span class="login_text" onclick="bubble_fn_loginPopup()">log in</span>. Otherwise, fill in your name and email below.</p>

I put this in the header b/w style tags:

    .login_text {
    cursor:pointer;
    color: #1FACD5;
    }

    .login_text:hover {
    color:#105A70;
    }

And it works. For some reason, I couldn’t get it to work by naming the span (using id=“some_name”).

Ultimately, probably best to upload a .css file to the root directory so the styles are site-wide.

2 Likes
8

I think the general reason for this (again, I suck at CSS) is that spans are generic containers. They do not have an id, but can be used to hold a class. (In fact, when I had this original idea as to how to solve the problem I was like, “spanclasses… yeah, spanclasses could do this”. Which is, of course, just me going “I’ve seen spanclasses before – I wonder what the heck those are.”… which is just my brain going “span… class… ah yes, a spanclass!”

But that’s the sort of explanation here.

You’re correct to make the CSS override/overload sitewide, so that you could just do this wherever you like and not have to worry about defining the hover state.

9

This post/reply is an oldie (3yrs) … but a goldie … so I wanted to say thank you Keith for your video 3yrs ago …

image

I wanted to kick a popup when the user clicks “see disclaimer” without converting the whole text element into a clickable element/event while preserving text/link/colour/click behaviour.

Rendering the text as an html element, then using the JS Toolbox (following Keith’s instructional video) hit the spot!

THANK YOU!

1 Like
10

Unfortounately this no longer seems to work… :pensive:

11

Solution is here.