• 0

Calling Modal From Text Link Or Custom Image Link

Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

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

 

 <!-- Text to trigger modal -->
    <a href="#myModal" class="texttrigger" data-toggle="modal">Text launches modal</a>
     
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p>One fine body…</p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>
3 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

[removed comment]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'll try that real quick. Thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?(!)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

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

 <!-- Text to trigger modal -->
    <a href="#myModal" class="texttrigger" data-toggle="modal">Text launches modal</a>
     
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p>One fine body…</p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>

 

Thanks for this, loving the option to have a modal popup as text!

 

Only thing is when it pops up it greys out the whole screen, modal included. Something to do with this html: 

<div class="modal-backdrop fade in"></div>

 

Any ideas? Screenshot link:

https://www.dropbox.com/s/qkd5naeyjsda070/Screenshot%202013-11-11%2009.32.21.png

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI,

 

This is because as far as I know you're using the HTML, this causes a conflict with the shortcodes scripts (I think).

If you wish to have a modal work with text, the simplest method is to use a plugin such as lightBox for Wordpress or FancyBox.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now