6 replies to this topic

[thomstark]

I've created a login/registration/reset password modal. Go here: www.bringtheharvest.com and click on the login button in the sidebar to see it. 

 

(1) I want to be able to call up the modal with a standard text link, one of which will be placed in my footer, and several of which will be placed in the body of various pages throughout the site. 

 

(2) I want to be able to call up the modal with a custom rollover image designed to match my top-level nav, which I'll then hook up there next to them, and create a conditional: if logged in, then don't show. 

 

James has been helping me try to figure this out. One of the things he suggested was just to copy and paste the modal's full html, but I tried that in the footer and I can't figure out how to create an actual link to it. 

 

Another thing I did in the footer, which I'll have up there now for you to see, is to just do another standard button shortcode in the footer, then remove the button type, leaving just the text link behind. This worked, but then when I called up the modal with the text link, some of my css customizations were quite awry and also the login/register/reset password tabs were inoperable, so they could only see the login tab. It's not a problem with the footer widget, because it's an enhanced text widget, which accepts all kinds of code. 

 

Any ideas? So I think I can achieve (1) just by removing "type=btn" from the shortcode, but in my footer, the modal doesn't function properly. I may end up having the same problem when I move the one that works from the sidebar (where it currently is) up to the nav section with a hook.

[thomstark]

Update: It seems to be that I can't have the same modal more than once on a page with full functionality. Right now I have a button and a label in my sidebar. I copied the entire modal from the button instance, and created a second label instance. The original button's modal has full functionality. The new label version, however, does not. It open up the modal but the tabs don't function, just as with the case of the footer's instance of the modal. I tried giving the button and label in the sidebar different IDs in the shortcode; that didn't work. 

[thomstark]

[removed comment]

[James B]

Hi Thom, i've found the code that i had on the other site to open the modal from a text link

 

Please Login or Register to see this Hidden Content

[thomstark]

I'll try that real quick. Thanks.

[thomstark]

That works great! Thanks, James. Now the BIG problem is that I can't have more than one instance of the same modal on the page. If you go to my sidebar right now, there are three modals (all the same content). The first is the text link I just created, thanks to you. The second, a button. The third, a label. The text link modal works correctly, I assume because it's the first instance. On the other two, though, the tabs don't work. The tab titles change their status from inactive to active, but the tab panes themselves don't change. And the problem gets worse in the footer "login" link, where my CSS gets all messed up in addition to the tabs not working. Help?(!)

[thomstark]

Problem solved. Rather than repasting the same modal content more than once on the same page, I just reuse that HTML link anywhere I want, as many times as I want, and that link calls up the same instance. 

 

One thing though: If I put the modal content in either the branding/header or the footer, it'll screw up my CSS styling (I'm assuming because those sections don't call all of the same CSS files --or something--). So as long as I put my one instance of the modal in the main body somewhere, I can call it up from the branding, from the footer, wherever, and it all works perfectly. Thanks, James!